使用纯CSS，如何改变<option>元素选中状态的文字颜色

Posted 2023-02-23

【中文标题】使用纯CSS，如何改变<option>元素选中状态的文字颜色

【英文标题】：Using pure CSS, how to change the text color of the selected state of <option> element

【发布时间】：2016-07-23 08:00:39

【问题描述】：

这可能是重复的。但是它不是How to style a <select> dropdown with CSS only 的重复。该线程处理样式<select> 元素。我要设计的是<select> 元素中<option> 的不同状态。

这可能是与CSS :selected pseudo class similar to :checked, but for <select> elements 类似的问题。我已阅读并从中受益。

我已经阅读了 2 天，并且遇到了几个不同/相互冲突的答案。有人说无法做到，也有人说一些新的浏览器确实支持它。就这样吧。

我无法更改多选下拉菜单中所选项目的文本颜色。 （在这种情况下是黑色的）

但是，我可以更改已选和未选项目的背景，并且可以更改未选项目文本的颜色。 （红色）

我也无法更改突出显示项目的文本颜色（在这种情况下为白色）。

select.multplClass option:checked  
    margin:2px 0 !important;
    padding:3px 0 0 40px !important;
    background: url("../images/checkbox-02-Thin-24_checked.png") 5px center no-repeat , linear-gradient(#b9e763, #b9e763);
    color:blue !important;


select.multplClass option:not(:checked)  
    margin:2px 0 !important;
    padding:3px 0 0 40px !important;
    background: url("../images/checkbox-02-Thin-24_unchecked.png") 5px center no-repeat;
    color:red !important;

<select multiple="" name="staff_type_idx" class="multplClass">
    <option class="multiple" value="1" selected="selected">Yönetici</option>
    <option class="multiple" value="2">Antrenör</option>
    <option class="multiple" value="3" selected="selected">Kondüsyoner</option>
</select>

【问题讨论】：

***.com/questions/8619406/… 。我已经读过这个踏板。我从那里得到了 'option:checked' 和 'option:not(:checked)' 以在我的 CSS 中使用。它适用于未选中的项目，但不适用于已选中的项目。

您已经回答了自己的问题：支持因浏览器（和操作系统）而异。没有使用原生<option>s 的跨浏览器解决方案。

我不是在寻找跨浏览器的解决方案。我对 Chrome 最感兴趣。由于未选择的元素可以在 Chrome 中设置样式，我假设选定的元素也应该能够。 @AndréDion

如前所述，对于像这样的操作系统级 UI 控件的样式设置没有标准。你得到你所得到的，尽管那是有限的。您必须使用 CSS、html 和 JS 重新创建 UI，以实现您所追求的。这既笨拙又不幸，但这就是现状。

How to style a <select> dropdown with CSS only without javascript?的可能重复

【参考方案1】：

一种解决方案，但不是一个干净的解决方案，用于背景将使用线性渐变。

例如

option:checked 
    background-image: linear-gradient(0deg, red, red)

这会使所选选项的背景变为红色。这只是一种解决方法，不是一个好的解决方案。

【参考方案2】：

html select 中的选项无法设置样式。

它们自身不能包含任何 html，只能包含文本。

选项不是由浏览器呈现，而是由操作系统呈现。

您可以使用自定义多选，例如this

【讨论】：

我看到其他人说“html select 中的选项无法设置样式。”，但是我可以使用“select.multplClass option:not(:checked)”设置未选择的选项元素的文本颜色。但不是被选中的。我错过了一些基本的东西吗？

我提到的所有规则都是关于选择选项的。您的风格是为选择框着色。您的样式不适用于选择框内更深的元素。