溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下html5中progress標簽怎么更改進度條顏色，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
首先我們先來認識下html5 progress標簽的簡介：
progress是HTML5的一個新元素，表示定義一個進度條，用途很廣泛，可以用在文件上傳的進度顯示，文件下載的進度顯示，也可以作為一種loading的加載狀態條使用。
提示：請結合<progress>標簽與javaScript一同使用，來顯示任務的進度。
注釋：<progress>標簽不適合用來表示度量衡（例如，磁盤空間使用情況或查詢結果）。如需表示度量衡，請使用<meter>標簽代替。
html5 progress進度條語法：
<progress value='70' max='100'></progress>
我們來準備個html5 progress標簽的實例：
<html>
<head>
<meta charset="utf-8">
<title>億速云</title>
<style type="text/css">
progress{
width: 168px;
height: 5px;
}
progress::-webkit-progress-bar
{
background-color:#d7d7d7;
}
progress::-webkit-progress-value
{
background-color:orange;
}
</style>
</head>
<body>
<progress value="100" max="100" class="hot">
</body>
</html>解釋下，在Chrome瀏覽器中progress是以如下結構渲染的
progress
:-webkit-progress-bar 全部進度
:-webkit-progress-value 已完成進度
通過這兩個偽元素為其添加樣式。
但在別的瀏覽器中又有所不同，如IE10，這兩個偽元素不起作用，直接用color樣式可以修改已完成進度的顏色，而全部進度為background
FireFox中progress-bar為已完成進度，background為全部進度,而Opera中對這個樣式只能為瀏覽器默認樣式。
因此兼容性寫法可以考慮如下：
progress
{
color:orange; /*兼容IE10的已完成進度背景*/
border:none;
background:#d7d7d7;/*這個屬性也可當作Chrome的已完成進度背景，只不過被下面的::progress-bar覆蓋了*/
}
progress::-webkit-progress-bar
{
background:#d7d7d7;
}
progress::-webkit-progress-value,
progress::-moz-progress-bar
{
background:orange;
}以上就是關于進度條的顏色css樣式的代碼了，顯示的效果如下：
看完了這篇文章，相信你對html5中progress標簽怎么更改進度條顏色有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
