Question

选择选项的“选定”颜色是否有样式？例如：

<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>

当我选择一个选项变成蓝色时，我想覆盖它并且使它成为一种不同的颜色。在我期望的样式 “选择颜色”，但它不存在。

Answer 1

您可能无法使用纯CSS执行此操作。但是，一点点javascript可以做得很好。

粗暴的做法 -

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);

Answer 2

<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工作得很好......

Answer 3

您不能依赖CSS来表单元素。所有浏览器的结果差别很大。我认为Safari根本不允许您自定义任何表单元素。

最好的办法是使用像jqTransform这样的插件（使用jQuery）。

编辑：该页面目前似乎不起作用。还有Custom Form Elements支持MooTools，并且可能在将来支持jQuery。

Answer 4

目前CSS不支持此功能。

您可以使用DIVs / CSS构建自己的插件或使用模拟此行为的插件。

Answer 5

此语法在XHTML中有效，但在IE6中不起作用，但这是一种非JavaScript方式：

option[selected] { background: #f00; }

如果您想要即时执行此操作，那么您必须使用其他人建议的方式使用javascript ....

Answer 6

我认为您可能正在寻找的解决方案是：

option:checked {
  box-shadow: 0 0 10px 100px #FFFF00 inset; }

Answer 7

原则上，您可以使用选项[selected]作为选择器来设置样式，但这在许多浏览器中都不起作用。此外，这只允许您设置所选选项的样式，而不是具有悬停焦点的选项。

经测试可在Chrome 9和Firefox 3.6中使用，但无法在Internet Explorer 8中使用。

Answer 8

我意识到这是一个旧帖子，但是如果它有帮助，你可以应用这个CSS让IE11为<select>元素的焦点指示画一个虚线轮廓，使它类似于Firefox的焦点指示： select:focus::-ms-value { background: transparent; color: inherit; outline-style: dotted; outline-width: thin; }

Answer 9

在CSS中：

SELECT OPTION：选中{background-color：red; }

Answer 10

我们可以将蓝色覆盖为我们的自定义颜色它适用于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");
}

HTML <select>选择选项背景色CSS样式</select>

10 个答案: