Javascript HTML <select> 选定选项背景色 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2402146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML <select> selected option background-color CSS style
提问by arieltools
Is there a style for a select option's "selected" color? For example:
选择选项的“选定”颜色是否有样式？例如：
<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>
When I select an option it turns blue, I want to override this and make it a different color. In the style I expected something like "selected-color", but it doesn't exist.
当我选择一个选项时它会变成蓝色，我想覆盖它并使它成为不同的颜色。在我期望的风格中，像“selected-color”这样的东西，但它不存在。
采纳答案by N 1.1
A crude way to do it -
一个粗略的方法 -
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);
回答by Master V
<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
http://pro.org.uk/classified/Directory?act=book&category=120
Tested it in FF,Opera,Konqueror worked fine...
在 FF、Opera、Konqueror 中测试它工作正常......
回答by DisgruntledGoat
You cannot rely on CSS for form elements. The results vary wildly across all the browsers. I don't think Safari lets you customize anyform elements at all.
表单元素不能依赖 CSS。结果在所有浏览器中都有很大差异。我认为 Safari 根本不允许您自定义任何表单元素。
Your best bet is to use a plugin like jqTransform(uses jQuery).
最好的办法是使用像jqTransform这样的插件（使用 jQuery）。
EDIT: that page doesn't seem to be working at the moment. There is also Custom Form Elementswhich supports MooTools and may support jQuery in the future.
编辑：该页面目前似乎不起作用。还有支持 MooTools 的自定义表单元素，将来可能会支持 jQuery。
回答by Diodeus - James MacFarlane
Currently CSS does not support this feature.
目前 CSS 不支持此功能。
You can build your own or use a plug-in that emulates this behaviour using DIVs/CSS.
您可以构建自己的或使用插件来模拟使用 DIV/CSS 的这种行为。
回答by automaticAllDramatic
This syntax will work in XHTML and does not work in IE6, but this is a non-javascript way:
此语法在 XHTML 中有效，在 IE6 中无效，但这是一种非 JavaScript 方式：
option[selected] { background: #f00; }
If you want to do this on-the-fly, then you would have to go with javascript, the way others have suggested....
如果您想即时执行此操作，那么您将不得不使用 javascript，就像其他人建议的那样......
回答by Renato Camargos
I think the solution you may been looking for is:
我认为您可能正在寻找的解决方案是：
option:checked {
box-shadow: 0 0 10px 100px #FFFF00 inset; }
回答by Matthew Wise
I realise this is an old post, but in case it helps, you can apply this CSS to have IE11 draw a dotted outline for the focus indication of a <select>element so that it resembles Firefox's focus indication:
select:focus::-ms-value {
background: transparent;
color: inherit;
outline-style: dotted;
outline-width: thin;
}
我意识到这是一篇旧帖子，但如果有帮助，您可以应用此 CSS 让 IE11 为<select>元素的焦点指示绘制虚线轮廓，使其类似于 Firefox 的焦点指示：
select:focus::-ms-value {
background: transparent;
color: inherit;
outline-style: dotted;
outline-width: thin;
}
回答by Olli Etuaho
In principle, you can style it using option[selected] as selector, but that doesn't work in many browsers. Also, that only allows you to style the selected option, not the option that has hover focus.
原则上，您可以使用 option[selected] 作为选择器来设置样式，但这在许多浏览器中不起作用。此外，这只允许您设置所选选项的样式，而不是具有悬停焦点的选项。
Tested to work in Chrome 9 and Firefox 3.6, doesn't work in Internet Explorer 8.
经测试可在 Chrome 9 和 Firefox 3.6 中运行，在 Internet Explorer 8 中不起作用。
回答by Plastónico
In CSS:
在 CSS 中：
SELECT OPTION:checked { background-color: red; }
选择选项：选中 { 背景颜色：红色；}
回答by Rajendra
We Can override the blue color in to our custom color It works for Internet Explorer, Firefox and Chrome:
我们可以将蓝色覆盖为我们的自定义颜色它适用于 Internet Explorer、Firefox 和 Chrome：
By using this below following CSS:
通过使用以下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");
}
