移除 antd select 组件上的轮廓

Question

我正在使用 antd NPM 包的 Select 组件。我想删除组件聚焦时出现的蓝色轮廓。我怎样才能删除它？

我试过使用带样式的组件来设置组件的样式。样式如下所示：

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

我希望删除蓝色轮廓。但是我的样式似乎不起作用

Answer 1

如果您观察浏览器中的 CSS，您会发现需要覆盖的内容。

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

我把它悬停了。

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

Answer 2

我设法在一个困难的下拉输入中修复它：

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

Answer 3

一种干净的方法是将 bordered 选项设置为 false，如下所示。 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>

Answer 4

这对我来说效果很好：

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

border-color 会在聚焦和未聚焦时覆盖边框，如果您想在聚焦时更改边框，请在 .ant-select-open[=11= 上应用样式]

移除 antd select 组件上的轮廓

Remove outline on antd select component

reactjs

styled-components

antd