Remove outline on antd select component

Question

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

Tribble

Why would you want to? Ant design have made a nice focus style and it's important for accessibility. Did you look at the markup before posting? Looks like they apply it to .ant-select-selection and .ant-select-selection:focus and they do it with border + box-shadow... – Antigorite

@Dominic I have tried overriding .ant-select-selection and .ant-select-selection:focus too. It doesn't help. The outline is still there – Tribble

Answer 1

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

Antigorite

Does it work? I am trying for a day and it is not working for me. Your codesandbox code isn't working. – Cecilycecity

Answer 2

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>

Mckelvey

Great, This is working for me. The correct answer was not worked for me. – Corticosteroid

Answer 3

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;
    }

Derive

Answer 4

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

Pulverize

Answer 5

.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
}

this worked for me to get ride of the default blue boarder when input is selected

Terza