2012-06-01 61 views
0

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

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

谷歌瀏覽器,背景選項的顏色很好,第一個選項是默認選擇的選項(我知道這是因爲打印),但選擇項目的背景顏色是白色。

這是奇怪的,因爲它只能在谷歌瀏覽器,以便

如果有人知道如何設置選擇項,其所選的選項顏色的顏色的顏色,這將是巨大

謝謝

回答

2

基於一個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

+0

此代碼只允許更改選擇標籤內選項的顏色。我的問題不是這個。我的選項有它們的背景顏色,但是當我選擇一個選項時,選擇標籤會將所選選項的值放入裏面,但不會以正確的顏色顯示。這個問題只發生在谷歌Chrome瀏覽器 – Mtrompe

+0

每個瀏覽器都有它自己的方式來處理表單元素,你需要微調該代碼,讓你做到你所需要的。 – balexandre