如何改變HTML5進度條

Question

的顏色我有HTML進度條，其價值的變化動態

1）我想告訴其他顏色在一個顏色已完成任務，剩下的任務。

2）如果該值超過指定的最大值，則超出的值必須以不同的顏色顯示。

如何做到這一點。

Answer 1

你可以通過使用css規則來實現你需要的東西，在設計你的進度條時你必須牢記的唯一重要的事情就是將它們放在一個選擇器中打破了地球上的每個瀏覽器（包括polyfilled ），所以你必須編寫三個獨立的規則，它們具有相同的CSS屬性。

首先讓重置CSS規則進度條：

progress,   /* All HTML5 progress enabled browsers */ 
{ 

    /* Turns off styling - not usually needed, but good to know. */ 
    appearance: none; 
    -moz-appearance: none; 
    -webkit-appearance: none; 

} 

以下規則是最常用的瀏覽器的基本選擇。 通過改變背景顏色（IE顏色），您可以更改欄的顏色，如你所願：

/* IE10 */ 
progress { 
    color: black; 
} 

/* Firefox */ 
progress::-moz-progress-bar { 
    background: black; 
} 

/* Chrome */ 
progress::-webkit-progress-value { 
    background: black; 
} 

接下來要做的是改變給定值的顏色，爲此，你可以使用選擇器用progress + [value="value_to_style"]構建。 在下面的例子中，我使用一個特定的規則[value^="9"]應用紅色到酒吧所有以啓動值9（91,92,93，...）：

progress[value^="9"]::-moz-progress-bar { 
background-color : red; 
} 

，如果你需要顯示一個特殊的顏色，如果價值是>最大simpy使用上述規則，其中風格放置一個特殊的背景顏色。

你可以看到一個工作的例子，說明這種風格如何應用於這個jsFiddle