HTML <select> 元素中选定选项的背景颜色 CSS 样式

Question

HTML <select> 元素中选定选项的背景颜色 CSS 样式

30

选项中"selected"颜色的样式有吗？例如：

<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"的东西，但它不存在。

- arieltools

可能是重复的问题：在悬停时更改选择列表选项背景颜色 - doppelgreener

@doppelgreener - 那个“重复”的问题比这个晚了两年以上。 - Kyle Delaney

10个回答

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

在火狐、欧朋和肯夸兹浏览器中测试，一切正常...

- Master V

6

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

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

- Renato Camargos

1

@Muhammed 这确实可以。但你需要检查浏览器版本。请查看：https://www.w3schools.com/cssref/sel_checked.asp - Renato Camargos

5

你不能依靠CSS来处理表单元素，因为在所有浏览器中结果都各不相同，我认为Safari根本不允许你自定义任何表单元素。

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

编辑：该页面目前似乎无法正常工作。还有Custom Form Elements支持MooTools，并且将来可能支持jQuery。

- DisgruntledGoat

是的，如果使用jQuery不行的话，就必须这样做。谢谢。 - arieltools

1

@ari：这些插件有很多，我今天刚看到两个新的：http://swizec.com/code/styledButton/ 和 http://pixelmatrixdesign.com/uniform/。 - DisgruntledGoat

所有这些库的链接都已经失效了。 - ejectamenta

2

这种语法在XHTML中可用，但在IE6中不可用，但这是一种非JavaScript的方法：

option[selected] { background: #f00; }

如果您想实时做到这一点，那么您必须使用JavaScript，就像其他人建议的那样...

- automaticAllDramatic

2

目前CSS不支持这个功能。

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

- Diodeus - James MacFarlane

1

我知道这是一篇旧文章，但如果有帮助的话，您可以应用这个CSS来使IE11绘制虚线轮廓来表示

- Matthew Wise

0

原则上，您可以使用 option[selected] 作为选择器来设置其样式，但在许多浏览器中无法正常工作。此外，这只允许您设置所选选项的样式，而不能设置悬停焦点的选项的样式。

已测试在 Chrome 9 和 Firefox 3.6 中可用，但在 Internet Explorer 8 中不可用。

- Olli Etuaho

-2

在CSS中：

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

- Plastónico

在选择器中检查了伪类选择器吗？ - DJG22

尝试这段代码，当您展开选择对象时，所选值将以红色显示：<html> <head> <style type="text/css"> SELECT OPTION:checked { background-color: red; } </style> </head> <body> <select> <option value=""></option> <option value="1">第一个值</option> <option value="2">第二个值</option> <option value="3">第三个值</option> <option value="4">第四个值</option> </select> </body> </html> - Plastónico

-3

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

- Rajendra

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- N 1.1 · Accepted Answer

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