我正在尝试设置一个选择选项的背景色，如下所示：
<select>
<option class="yellow">Option 1</option>
<option class="blue">Option 2</option>
<option class="red">Option 3</option>
</select>
其中类将是这样的：CCD_ 1。其想法是，当显示下拉列表时，每个选项都将具有适当的背景颜色。
这似乎应该是一件简单的事情，但在这里呆了一个小时后，我发现了很多声称可以解决这个问题的答案，但它们实际上并不起作用。所有选项都具有默认背景色。
以下是一些在Mac上使用Chrome 83.0.4103.116和Safari 13.1时不适用的示例：
- https://stackoverflow.com/a/43740774
- https://stackoverflow.com/a/18092074(更改所选颜色有效，但更改选项颜色无效(
- https://stackoverflow.com/a/12836286
他们确实可以在Mac上使用FF。
这可能与Mac上最新的Chrome和Safari兼容吗？Javascript解决方案可以。
根据对上述问题的评论。。。
我在Mac上使用最新的Chrome浏览器。
是的，有问题。(老实说，我真的很惊讶在我的Windows工作站上提供的链接可以工作。从历史上看，设计<select>和其他一些表单元素一直是一个白日梦。(
一些表单元素比其他表单元素更依赖于本机操作系统功能，<select>元素也是如此。请注意，一个完全没有样式的标准<select>在Mac上与在Windows或Linux上看起来非常不同。在这种情况下，听起来本机操作系统功能根本不支持这里的样式。
为了获得最大的兼容性，你最好的选择可能是使用JavaScript插件(如果你不反对使用jQuery，jQuery有很多插件，如果你已经在使用某些东西，其他框架也有其他选项(来显示现有<select>的风格化菜单。或者，如果你雄心勃勃，你可以自己写。但本机功能是操作系统的突发奇想，而且可能会持续一段时间。
我希望这对你有用。我在css中使用了#id选择器，它起作用了：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
#red{
background-color: red;
}
#yellow{
background-color: yellow;
}
#green{
background-color: green;
}
</style>
<select>
<option id="red">Option 1</option>
<option id="yellow">Option 2</option>
<option id="green">Option 3</option>
</select>
</body>
</html>
为什么它在浏览器中不起作用。我尝试了同样的代码，它在我的浏览器中运行。
<select>
<option class="yellow">Option 1</option>
<option class="blue">Option 2</option>
<option class="red">Option 3</option>
</select>
和css代码如下：
.yellow{
background-color:yellow;
}
.blue{
background-color:blue;
}
.red{
background-color:red;
}
如果它仍然不起作用，那么我建议将您的选项包装在或标记中，并将背景色属性应用于它们。