progress進度條的樣式修改

由於公司在做的公眾號上需要進度條，我就想着用progress標簽，可是progress標簽很難修改樣式，因而在網上查詢了一番。

現在總結一下。

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

看看他的兼容性：

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

因而需要兼容寫法：

Chrome下：

progress{
    width: 168px;
    height: 5px;
    color:#f00;
    background:#EFEFF4;
    border-radius: 0.1rem;
}
/* 表示總長度背景色 */
progress::-webkit-progress-bar{     
    background-color: #f2f2f2;
    border-radius: 0.2rem;
}
/* 表示已完成進度背景色 */
progress::-webkit-progress-value{
      background: #a21211;
      border-radius: 0.2rem; 
}

 

FireFox下：

progress{
    width: 168px;
    height: 5px;
    color:#f00;
    background:#EFEFF4;     /* 表示總長度背景色 */
}
/* 表示已完成進度背景色 */
progress::-moz-progress-bar{
     background-color:#f00;
}

IE10及以上：

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

調整后的結果：

如果你是做移動端的，以谷歌瀏覽器為准。谷歌上進度條是什么顏色，手機上就是什么顏色。

 

 

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