我有一个基本的 html 选择：
<select>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Grape</option>
</option>
我想将每个选项的背景颜色设置为不同的。例如，苹果是红色的，香蕉是黄色的，葡萄是紫色的。通过启动下拉菜单，我将在每个选项中看到不同的颜色。
是否可以在最新的 Firefox 和 Webkit（Chrome 和 Safari）浏览器上使用 CSS3/HTML5 实现上述目标？
注意：您能否在最新的 Firefox 和 Chrome（可能在 Mac 上）测试您的解决方案？我知道背景颜色方法，但它只适用于 Mac 上的 Firefox。
【问题讨论】：
不就是这么简单吗？ http://jsfiddle.net/d8p8Q/
<select>
<option value="1" style="background:red">Apple</option>
<option value="2" style="background:yellow">Banana</option>
<option value="3" style="background:purple">Grape</option>
</select>
我错过了什么吗？
Safari Chrome （我使用的是 Windows 7）
“葡萄”是蓝色的，因为这是我悬停在上面的那个。我认为不可能使用原生 <select> 元素来更改“选定”蓝色。
如果这就是您要做的事情，则必须将 <select>s 替换为 JavaScript 替换，例如：
【讨论】：
<select>s。请参阅：456bereastreet.com/lab/form_controls/select。 没有办法改变它，除了使用 JavaScript 将它们换掉，就像我的回答一样。
/* Style */
select option[value="1"] {
background-color: #f00;
}
select option[value="2"] {
background-color: #0f0;
}
select option[value="3"] {
background-color: #00f;
}
<!-- HTML -->
<select>
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
当然，以类为目标会更容易，但这应该可以帮助您入门。
【讨论】：
像这样？ http://jsfiddle.net/3HWUw/1/
HTML：
<select>
<option id="one" value="1">Apple</option>
<option id="two" value="2">Banana</option>
<option id="three"value="3">Grape</option>
</select>
CSS：
#one {
background-color: red;
}
#two {
background-color: yellow;
}
#three {
background-color: green;
}
【讨论】：
上面的工作，或者你可以在 CSS 中这样做：
【讨论】：