HTML 选择的背景色CSS样式。

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.

当我选择一个选项时，它会变成蓝色，我想要覆盖它，使它变成另一种颜色。在风格上，我期望的是“选择颜色”，但它不存在。

10 个解决方案

#1

You may not be able to do this using pure CSS. But, a little javascript can do it nicely.

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

#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

Tested it in FF,Opera,Konqueror worked fine...

在FF、Opera、Konqueror中测试它的效果。

#3

You cannot rely on CSS for form elements. The results vary wildly across all the browsers. I don't think Safari lets you customize any form 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 Elements which supports MooTools and may support jQuery in the future.

编辑:那个页面现在好像不太好用。还有一些定制的表单元素支持MooTools，并可能在将来支持jQuery。

#4

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.

您可以构建自己的或使用一个使用DIVs/CSS来模拟这种行为的插件。

#5

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,别人的建议....

#6

I think the solution you may been looking for is:

我认为你一直在寻找的解决方案是:

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

#7

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.

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

Tested to work in Chrome 9 and Firefox 3.6, doesn't work in Internet Explorer 8.

在Chrome 9和火狐3.6中测试工作，在ie8中是行不通的。

#8

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为一个

#9

-1

In CSS:

在CSS中:

SELECT OPTION:checked { background-color: red; }

选择选项:选中的背景色:红色;}

#10

-4

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

#1