設置谷歌瀏覽器中選擇HTML項目的顏色

Question

我想顯示HTML中的下拉列表。 我設法在Internet Explorer中這樣做easilly，但我在谷歌瀏覽器上使用它時遇到了問題。

我創造的在選擇標籤的選項的背景色下面的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。