使用纯CSS，如何更改<option>元素

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

Answer 2

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

所以例如

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

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