更改选择框中所选选项的背景颜色答案

【问题标题】：Changing the background color of the selected options in a select box更改选择框中所选选项的背景颜色
【发布时间】：2011-07-02 15:29:22
【问题描述】：

我必须像这样创建一个选择框。我已经能够使用 optgroup 获得这个树形结构，但是我在将所选选项的默认背景颜色从默认颜色更改为此橙色时遇到了问题。我知道 js 解决方案，但我对纯 HTML/CSS 解决方案更感兴趣。如果它可以在所有浏览器中运行会更好，但没有压力；）

提前致谢。

【问题讨论】：

【解决方案1】：

HTML/CSS 无法做到这一点。选择元素的颜色是特定于操作系统的，因此不能使用 CSS 或 HTML 更改。 Javascript 解决方案已经开发出来，它们是（到目前为止）唯一的方法:)

【讨论】：

【解决方案2】：

在 Firefox 中，您可以使用 css background-image 属性和 :checked CSS 伪类选择器来实现它。

option:checked, option:hover {
    color: white;
    background: #488f8f repeat url("mycolor.gif");
}

您可以在我的网站 www.speich.net 上找到不同颜色的css demo

【讨论】：

这似乎只适用于具有multiple 属性的select 元素。
目前，Chrome 78 和 Edge 42（在 Windows 上）也可以设置背景。正如 John 所指出的，当设置了属性 multiple 时，这仅适用于 Firefox 和 Chrome，在 Edge 中它也适用于单个 select 元素。