如何更改 <Select/> 的选定 <Option/> 的 css？答案

【问题标题】：how can I change the css of a selected <Option/> of <Select/>?如何更改 <Select/> 的选定 <Option/> 的 css？
【发布时间】：2022-01-23 14:27:15
【问题描述】：

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

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

有没有办法做到这一点？

（选择，选项组件 - https://ant.design/components/select/）

【问题讨论】：

原生 html 选择还是 web 框架？我确定有一种方法可以区分是否选择了选项，因此您可以使用动态 className 来更改所选选项的样式
@fengxh 正如我在描述中所写，我使用的是 React.js 框架和 ant-design 组件，所以没有原生 html 选择，我相信有一种方法可以区分选项是否为也选择了，但我不知道实际的方式，这就是我在这里问的原因。如果动态类名更改行为是可能的，我很想听听 - 这是我的问题。

标签： javascript reactjs antd

【解决方案1】：

首先抱歉我的英语不好，我不知道这是最好的答案，但是当我想更改元素样式时，我会使用它的类并给该类一个 css。对于选择框，您可以在 css 文件中使用 ant-select-selector ：

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

如果你想检查不同的类，你可以在开发工具中检查元素。如果你看thisimg，当我选择选择框 div 时，我可以看到它自己的类，我可以改变它的背景颜色。

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢，但我实际上正在使用一个框架 - React.js 和一个组件库 - 'ant design'，我正在寻找一个更通用的始终有效的解决方案，这在 React.js 中根本不起作用..
你可以找到 CSS： .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { background: #f00 !important;} 你所有的选择的“选项”（因为它不是真正的选择/选项标签）将是红色的。