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

Question

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

是否有选择选项的"选定"颜色的样式？例如:

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

Run Code Online (Sandbox Code Playgroud)

当我选择一个选项变成蓝色时,我想覆盖它并使它变成另一种颜色.在我期望的样式,如"选择颜色",但它不存在.

Answer 1

N 1*_*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);

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 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>;

Run Code Online (Sandbox Code Playgroud)

http://pro.org.uk/classified/Directory?act=book&category=120

在FF中测试过,Opera,Konqueror工作得很好......

Answer 3

小智 6

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 4

Dis*_*oat 5

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

你最好的选择是使用像jqTransform这样的插件(使用jQuery).

编辑:该页面目前似乎没有工作.还有自定义表单元素,它支持MooTools,并且可能在将来支持jQuery.

归档时间：	15 年，6 月前
查看次数：	180138 次
最近记录：	8 年，7 月前