Remove outline on antd select component

user_9366180 0
Viewed 11025

I'm using antd NPM package's Select component. I want to remove the blue outline which appears when the component is focussed. How can I remove it ?

I have tried styling the component using styled components. The styling looks like follows:

const StyledSelect = styled(Select)`

    & .ant-select-selection__rendered {
        width: 200px;
        margin-left: 0;
        margin-right: 0;
        &:focus {
          outline: none;
          border: none;
        }
    }
    &.ant-select-focused {
      border: none;
      &:focus{
        outline: 0;
      }
    }
`;

I expect the blue outline to be removed. But my styling doesn't seem to be working

antd styled-components reactjs
4 Answers

If you observe the CSS in your browser you can see what you need to override.

.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
  border-color: #d9d9d9 !important;
  box-shadow: none !important;
}

I left it for hover.

codesandbox: https://codesandbox.io/s/cool-moon-ohznt

user_4140620

A clean approach would be to set the bordered option to false as shown below. More options and reference are available at https://ant.design/components/select/#components-select-demo-bordered

  <Select defaultValue="lucy" style={{ width: 120 }} bordered={false}>
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>

user_98730240

I managed to fix it in a difficult dropdown input with:

.ant-select:hover .ant-select-selector {
      border-color: #a2a2a2 !important;
      box-shadow: none !important;
    }
user_20765550

This worked fine for me:

.ant-select-selector {
  border-color: rgba(204, 204, 204, 0.5) !important;
  box-shadow: none !important;
}

The border-color will overwrite the border when it's focused and when it's not, if you want to change the border just when it's focused apply a style on .ant-select-open

user_92218980
Related