选择选项的“选定”颜色是否有样式？例如：
<HTML>
<BODY>
<FORM NAME="form1">
<SELECT NAME="mySelect" SIZE="7" style="background-color:red;">
<OPTION>Test 1
<OPTION>Test 2
<OPTION>Test 3
<OPTION>Test 4
<OPTION>Test 5
<OPTION>Test 6
<OPTION>Test 7
</SELECT>
</FORM>
</BODY>
</HTML>
当我选择一个选项时它变成蓝色，我想覆盖它并 让它变成不同的颜色。在我期望的风格中 “selected-color”，但它不存在。
【问题讨论】：
标签： javascript html css
一种粗略的方法-
var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
var options = this.children;
for(var i=0; i < this.childElementCount; i++){
options[i].style.color = 'white';
}
var selected = this.children[this.selectedIndex];
selected.style.color = 'red';
}, false);
【讨论】：
$(document).ready() 内，以便我的控件已呈现并且元素 ID 存在，因此 sel 不是 null。
<select name=protect_email size=1 style="background: #009966; color: #FFF;" onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
<option value=0 style="background: #009966; color: #FFF;" selected>Protect my email</option>;
<option value=1 style="background: #FF0000; color: #FFF;">Show email on advert</option>;
</select>;
http://pro.org.uk/classified/Directory?act=book&category=120
在 FF、Opera、Konqueror 中测试它运行良好...
【讨论】：
表单元素不能依赖 CSS。结果在所有浏览器中差异很大。我认为 Safari 根本不允许您自定义 任何 表单元素。
最好的办法是使用像 jqTransform 这样的插件（使用 jQuery）。
编辑：该页面目前似乎无法正常工作。还有Custom Form Elements支持MooTools，未来可能支持jQuery。
【讨论】：
我认为您可能正在寻找的解决方案是：
option:checked {
box-shadow: 0 0 10px 100px #FFFF00 inset; }
【讨论】：
目前 CSS 不支持此功能。
您可以构建自己的，也可以使用使用 DIV/CSS 模拟此行为的插件。
【讨论】：
这种语法在 XHTML 中有效，在 IE6 中无效，但这是一种非 javascript 方式：
option[selected] { background: #f00; }
如果您想即时执行此操作，则必须按照其他人建议的方式使用 javascript....
【讨论】：
我知道这是一篇旧帖子，但如果有帮助，您可以应用此 CSS 让 IE11 为 <select> 元素的焦点指示绘制虚线轮廓，使其类似于 Firefox 的焦点指示：
select:focus::-ms-value {
background: transparent;
color: inherit;
outline-style: dotted;
outline-width: thin;
}
【讨论】：
原则上，您可以使用 option[selected] 作为选择器对其进行样式设置，但这在许多浏览器中不起作用。此外，这只允许您设置所选选项的样式，而不是具有悬停焦点的选项。
经测试可在 Chrome 9 和 Firefox 3.6 中运行，但无法在 Internet Explorer 8 中运行。
【讨论】：
在 CSS 中：
选择选项：选中 { 背景颜色：红色； }
【讨论】：
我们可以将蓝色覆盖到我们的自定义颜色中 它适用于 Internet Explorer、Firefox 和 Chrome：
通过使用下面的 CSS：
option: checked, option: hover {
Color: #ffffff;
background: #614767 repeat url("data:image/gif;base64,R0lGODlh8ACgAPAAAGFGZQAAACH5BAAAAAAALAAAAADwAKAAAAL+hI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJFCtavIhRVgEAOw");
}
【讨论】：