progress進度條的樣式修改

因爲公司在作的公衆號上須要進度條，我就想着用progress標籤，但是progress標籤很難修改樣式，於是在網上查詢了一番。

如今總結一下。

progress是H5新標籤，主要用於顯示進度條。因爲他是H5新標籤，於是它存在一些兼容問題。

看看他的兼容性：

由此可看，progress樣式修改兼容性不是很好。

於是須要兼容寫法：

Chrome下：

 1 progress{
 2     width: 168px;
 3     height: 5px;
 4     color:#f00;
 5     background:#EFEFF4;
 6     border-radius: 0.1rem;
 7 }
 8 /* 表示總長度背景色 */
 9 progress::-webkit-progress-bar{     
10     background-color: #f2f2f2;
11     border-radius: 0.2rem;
12 }
13 /* 表示已完成進度背景色 */
14 progress::-webkit-progress-value{
15       background: #a21211;
16       border-radius: 0.2rem; 
17 }

 

FireFox下：

 1 progress{
 2     width: 168px;
 3     height: 5px;
 4     color:#f00;
 5     background:#EFEFF4;     /* 表示總長度背景色 */
 6 }
 7 /* 表示已完成進度背景色 */
 8 progress::-moz-progress-bar{
 9      background-color:#f00;
10 }

IE10及以上：

1 progress{
2     width: 168px;
3     height: 5px;
4     color:#f00;      /* 表示已完成進度背景色 */
5     background:#EFEFF4;     /* 表示總長度背景色 */
6 }

調整後的結果：

若是你是作移動端的，以谷歌瀏覽器爲準。谷歌上進度條是什麼顏色，手機上就是什麼顏色。

 

 

參考文章：張鑫旭老師progress樣式詳解 https://www.zhangxinxu.com/wordpress/2013/02/html5-progress-element-style-control/