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

Question

这可能是重复的。但是它不是 How to style a <select> dropdown with CSS only 的副本.该线程处理样式 <select>元素。我想要设置样式的是 <option> 的不同状态在<select>里面元素。

这可能是与 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>

Answer 1

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

它们内部不能包含任何 html，只能包含文本。

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

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