如何更改 <Select/> 中所选 <Option/> 的 css？

Question

我正在使用 React.js 和 ant-design 组件。

我有一个 <Select/> 组件，里面有一些 <Option/>，现在我知道在每个选定的选项上都添加了这个自动色调，但我想改变它做一个不同的，也可以更改背景等，但前提是选择了一个选项。

有办法吗？

Answer 1

<select>
  <option selected="">1</option>
  <option>2</option>
</select>
<style>
  option[selected]{
    background: #f00;
  }
</style>

这是正确的 CSS，但我认为它不适用于所有浏览器。即使在 Firefox 上，它也只有在您将鼠标悬停在展开的选项上时才会起作用。更改 CSS 输入样式总是非常糟糕和奇怪。这就是为什么有图书馆的原因。

Answer 2

首先抱歉我的英语不好，我不知道这是最好的答案，但是当我想更改元素样式时，我使用它的 class 并给 class a css。对于 selectbox 你可以使用 ant-select-select 或者在你的 css 文件中：

.ant-select-selector{background-color:green}

如果你想检查 class 不同的东西你可以检查 dev 中的元素 tools.If 你看 this img 当我 select 到 selectbox div 我可以看到它自己的 class 我可以改变它的背景颜色。

how can I change the css of a selected <Option/> of <Select/>?