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-selection,
.ant-select-selection:focus,
.ant-select-selection:active,
.ant-select-open .ant-select-selection {
  border-color: #d9d9d9;
  box-shadow: none;
}

我把它悬停了。

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

Answer 2

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

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

删除antd select组件上的轮廓

2 个答案: