Question

我正在尝试在HTML中显示下拉列表。我设法在Internet Explorer中轻松实现，但是当我在谷歌浏览器上使用它时我遇到了问题。

我为select标签中的选项的背景颜色创建了以下css：

option.red{background-color: #FF0000;}
option.green{background-color: #00FF00;}
option.blue{background-color: #0000FF;}

然后，在我的选择标签中，我有

<option class="red" value="red" selected="selected" >blabla</option>
<option class="green" value="green">blabla</option>
<option class="blue" value="blue">blabla</option>

在谷歌浏览器中，选项的背景颜色很好，第一个选项是默认选择的选项（我知道这是因为打印），但选择项目的背景颜色是白色。

这很奇怪，因为它只在谷歌浏览器上实现

如果有人知道如何将选择项目的颜色设置为所选选项颜色的颜色，那就太棒了

谢谢

Answer 1

基于existing answer，您可以尝试：

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 = 'gray';
    }
    var selected = this.children[this.selectedIndex];
        selected.style.color = 'red';
    }, false);

JSBin example also available

在Google Chrome中设置选择HTML项目的颜色

1 个答案: