代码之家 › 专栏 › 技术社区 › arieltools

html<select>所选选项背景色css样式

css html javascript

arieltools · 技术社区 · 16 年前

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

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

当我选择一个选项时,它变为蓝色,我想覆盖它并换一种颜色。以我所期望的风格 “选定颜色”,但它不存在。

10 回复 | 直到 16 年前

N 1.1 16 年前

您可能无法使用纯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);

Andrew Sunil Kumar B M 14 年前

<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测试过效果很好…

DisgruntledGoat 16 年前

表单元素不能依赖css。所有浏览器的结果差别很大。我不认为Safari可以让你定制任何完全是形式元素。

你最好的办法是使用像 jqTransform (使用jquery)。

编辑:那一页目前似乎不起作用。还有 Custom Form Elements 它支持mootools,将来可能支持jquery。

Diodeus - James MacFarlane 16 年前

当前css不支持此功能。

您可以构建自己的插件,也可以使用divs/css来模拟这种行为。

automaticAllDramatic 14 年前

这种语法在xhtml中有效,在ie6中无效,但这是一种非javascript方式:

option[selected] { background: #f00; }

如果你想快速完成这项工作,那么你必须使用javascript,就像其他人建议的那样……

Renato Camargos 9 年前

我想你一直在寻找的解决办法是:

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

Olli Etuaho 15 年前

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

在chrome 9和firefox 3.6中测试过,但在internet explorer 8中不起作用。

Matthew Wise 10 年前

我知道这是一篇老文章,但如果有帮助的话,你可以应用这个css让ie11画一个虚线来表示 <select> 元素,使其类似于Firefox的焦点指示: select:focus::-ms-value { background: transparent; color: inherit; outline-style: dotted; outline-width: thin; }

-2

Plastónico 11 年前

在CSS中:

选择选项:选中{背景颜色:红色;}

-4

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