選擇標記顏色不顯示在Firefox中

我有一個簡單的選擇下拉菜單的網頁，其中每個選項元素具有不同的顏色。展開後，顏色在Firefox（8.0）中顯示正常，但只要您單擊某個選項並且列表關閉，顏色就會變回黑色。選擇標記顏色不顯示在Firefox中

在撰寫摘要網頁時，顏色很重要。

這個問題似乎沒有出現在IE

<select name='STATUS' style='width:100px'> 
    <option value='NS' style='color:blue'>Not Started</option> 
    <option value='Started' style='color:Green'>Started</option> 
    <option value='Finished' style='color:red'>Finished</option> 
</select>

來源

2012-07-19 user1537237

的color聲明只會影響您的option元素，沒有選擇的選擇。所選選項的樣式取決於您的select元素的樣式。你必須改變使用JavaScript select元素的顏色，以達到你所期望的行爲：

<select class="colorchange" name='STATUS' style='width:100px;'> 
    <option value='NS' style='color:blue'>Not Started</option> 
    <option value='Started' style='color:Green'>Started</option> 
    <option value='Finished' style='color:red'>Finished</option> 
</select>

function selectColorChanger(){ 
    this.style.color = this.options[this.selectedIndex].style.color; 
} 

// this will affect all selects which have the "colorchange" class applied 
var selects = document.getElementsByClassName("colorchange"); 
var i; 

for(i = 0; i < selects.length; ++i){ 
    selects[i].onchange = selectColorChanger; 
}

Demo

來源

2012-07-19 09:00:23 Zeta

感謝您的答覆，代碼的作品，但我需要一個解決方案，它有一個選擇顏色時加載頁面，以便人們可以看到狀態儘快因爲他們加載頁面。我將在代碼中添加以在頁面加載後自動選擇正確的選項 – user1537237 2012-07-19 09:49:35

我提出的解決方案是使用PHP爲選擇標籤本身添加一個style =「color：$ COLOR」元素。由於當前狀態在呈現頁面時被保存在數據庫中，因此我檢查當前處於活動狀態，並相應地設置$ COLOR var。感謝您的幫助。 Shame Firefox並不像IE瀏覽器Chrome那樣自動渲染它。 – user1537237 2012-07-19 10:05:44

的解決方案，我想出了使用PHP來添加樣式=將「color：$ COLOR」元素添加到選擇標籤本身。
由於當前狀態在呈現頁面時保存在數據庫中，因此我檢查當前處於活動狀態，並相應地設置$ COLOR var。

感謝您的幫助。恥辱Firefox不會自動渲染它像IE瀏覽器鉻等

來源

2012-07-20 12:36:44 user1537237

選擇標記顏色不顯示在Firefox中

回答

相關問題