在谷歌浏览器中设置选择 HTML 项目的颜色

Question

我正在尝试在 HTML 中显示一个下拉列表。 我设法在 Internet Explorer 中轻松地做到了这一点，但是当我在 google chrome 上使用它时遇到了问题。

我为 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.