Html 在中设置的背景色
我正在尝试设置选择选项的背景色，如下所示：Html 在中设置的背景色,html,css,Html,Css,我正在尝试设置选择选项的背景色，如下所示： <select> <option class="yellow">Option 1</option> <option class="blue">Option 2</option> <option class="red">Option 3</option> </select> 类的位置如下
<select>
<option class="yellow">Option 1</option>
<option class="blue">Option 2</option>
<option class="red">Option 3</option>
</select>
在Mac上使用最新的Chrome和Safari是否可能做到这一点？Javascript解决方案没问题。我希望这对您有用。我在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>
根据对上述问题的评论 我在Mac上使用最新的Chrome浏览器 是的，有麻烦了。老实说，我很惊讶提供的链接能在我的Windows工作站上工作。从历史上看，设计a和其他一些形式元素一直是一个白日梦 一些表单元素比其他表单元素更依赖于本机操作系统功能，对于元素来说也是如此。请注意，一个完全没有样式的标准在Mac电脑上与Windows或Linux上看起来有很大不同。在这种情况下，本机操作系统功能似乎根本不支持这里的样式
为了获得最大的兼容性，您最好的选择可能是使用jQuery，如果您不反对使用jQuery，那么其他框架有很多，如果您已经在使用某些东西来显示现有框架中的样式化菜单。或者如果你有雄心壮志，你可以自己写。但是本机功能是操作系统一时兴起的，可能会持续一段时间。为什么它不能在浏览器中工作。我尝试了相同的代码，它在我的浏览器中工作
<select>
<option class="yellow">Option 1</option>
<option class="blue">Option 2</option>
<option class="red">Option 3</option>
</select>
如果仍然不起作用，我建议将选项包装在或标记中，并对其应用背景色属性。第三个链接中的代码片段对您不起作用？它在Chrome中为我工作。您是否使用特定的浏览器进行测试并需要支持？该浏览器本身可能不支持此功能。您引用的所有示例在Chrome和FF@David，我在Mac上使用最新的Chrome。@gaefan:Mac可能是问题所在。其他表单元素传统上使用大量本机操作系统功能进行渲染，而该操作系统可能不支持这方面的样式。我真的很惊讶上面的链接竟然在Windows中工作。为了获得最大的兼容性，您最好的选择可能是使用JavaScript插件。如果您不反对使用jQuery，jQuery有很多插件，如果您已经在使用某个插件来显示现有框架中的样式化菜单，那么其他框架也有自己的插件。或者如果你有雄心壮志，你可以自己写。@David，如果你愿意的话，这看起来是个不错的答案。这对我不管用。虽然我没有投你反对票。人们对这里的问题和答案都非常消极…@gaefan只是想帮助mate。我会在Mac上试用，并让你知道。我已经在使用Bootstrap了，所以Bootstrap下拉列表是一个很好的解决方案。谢谢你的提示。
.yellow{
background-color:yellow;
}
.blue{
background-color:blue;
}
.red{
background-color:red;
}