如何爲CSS3 html5 progress元素設置顏色？

Question

是否可以在HTML5中爲元素設置「bar」的顏色（當您指定一個值時，該條被填充到值的點）？如果是這樣，怎麼樣？背景顏色和背景似乎沒有任何影響。該技術是否與所有瀏覽器的最新版本兼容？

Answer 1

通過更改幾個瀏覽器專用選擇器的background，可以在<progress>元素中設置條的顏色。

在Firefox中，你可以使用以下命令：

progress::-moz-progress-bar { background: blue; } 

在Chrome或Safari，你可以使用：

progress::-webkit-progress-value { background: blue; } 

在IE10中，你只需要使用color屬性：

progress { color: blue; } 

來源：http://html5doctor.com/the-progress-element/

Answer 2

每個瀏覽器似乎在此刻進行不同的處理進度條造型，因此，你需要的款式像這樣：

progress { 
/* style rules */ 
} 
progress::-webkit-progress-bar { 
/* style rules */ 
} 
progress::-webkit-progress-value { 
/* style rules */ 
} 
progress::-moz-progress-bar { 
/* style rules */ 
} 

WebKit樣式Chrome和Safari和moz風格的Firefox。

從這裏您可以簡單地添加背景顏色background-color。

祝你好運！任何疑問，請在下面留言。

Answer 3

的WebKit /閃爍

背景色

顏色在WebKit瀏覽器的background-color一個progress元件的（即不增加/減少的部分）使用下面的：

progress::-webkit-progress-bar {background-color: #000; width: 100%;} 

顏色

顏色一個progress元件的所述的有效color移動部分使用下面的：

progress::-webkit-progress-value {background-color: #aaa !important;} 

---

壁虎/火狐

背景色

顏色Gecko瀏覽器的一個progress元件的background-color（不增加/減少的部分）使用下面的：

progress {background-color: #000;} 

顏色

色彩的所述有效color移動部分progress元素使用以下內容：

progress::-moz-progress-bar {background-color: #aaa !important;} 

---

三叉戟/的Internet Explorer（和「邊緣」）

當微軟實際上使得他們真的居然來通過努力，這實際上是一個熟能生巧直接的意義。

背景色

progress {background-color: #000;} 

顏色

progress {color: #aaa;}