Html CSS：选定的伪类类似于：已选中，但适用于<；选项>；元素

是否有方法在

元素中设置当前选定的

元素的样式

然后我可以为当前选择的选项元素提供背景色？这样，我可以设置当前可在关闭的下拉列表中查看的选项的样式

：checked

伪类最初应用于选择了HTML4

和
checked
属性的元素

资料来源：


因此，尽管不可能在每个浏览器中都设置
颜色的样式，但此CSS仍然有效：

option:checked { color: red; }


例如，从下拉列表中隐藏当前选定的项


选项：选中{显示：无；}

A.
B
C
实际上，您只能在：modified option元素上设置少数CSS属性的样式。
color
不起作用，
background color
也不起作用，但您可以设置
背景图像

您可以将其与渐变相结合来实现这一点


选项：悬停，
选择：重点，
选项：活动，
选项：选中{
背景：线性梯度（#5A2569，#5A2569）；
}

A.
B
C
这对我很有用：

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}

接受答案的css对我也不起作用。但是这种内联样式很有效。在Firefox 86和Chrome 88上测试



一个
两个
三
四
五
您测试过吗？这是我在FF8上看到的。更新：它在Chrome15中也不起作用。@emmett我也在Chrome16中检查过它。正如我在上一篇评论中所说，它在下拉列表中设置所选选项的样式，但在关闭的可视区域中不设置该选项的样式。@Web\U Designer Ok，我看到了这个问题。我用另一个（不可靠的）解决方案编辑了我的答案。接受的答案在chrome中对我不起作用。你可以在这里测试：被接受的答案对我不起作用，但这个解决方案起了作用。非常感谢。请注意，您也可以像这样对其应用过滤器：选项：选中{filter:grayscale（1）；}这类似于现在您可以在Chrome中设置复选框和单选按钮的样式，使其非蓝色。