如何设置进度元素的颜色？
如何设置进度元素的颜色？
提问于 2013-08-22 05:41:51
是否可以在HTML中为<progress>元素设置“条”的颜色(当您指定一个值时，条将一直填充到该值的点)？如果是这样的话，为什么呢？background-color和background似乎没有任何效果。这项技术是否与所有浏览器的最新版本兼容？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-08-22 05:47:52
您可以通过更改几个浏览器专有选择器的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/
总而言之，这就是：
progress::-moz-progress-bar { background: blue; }
progress::-webkit-progress-value { background: blue; }
progress { color: blue; }<progress value="0" max="100"></progress><br>
<progress value="25" max="100"></progress><br>
<progress value="50" max="100"></progress><br>
<progress value="75" max="100"></progress><br>
<progress value="100" max="100"></progress><br>
Stack Overflow用户
发布于 2013-08-22 05:51:46
目前，每个浏览器处理进度条样式的方式似乎不同，因此您需要像这样设置它的样式：
progress {
/* style rules */
}
progress::-webkit-progress-bar {
/* style rules */
}
progress::-webkit-progress-value {
/* style rules */
}
progress::-moz-progress-bar {
/* style rules */
}Chrome和Safari的WebKit样式和Firefox的moz样式。
在这里，你可以简单地用background-color添加背景色。
祝好运!有任何疑问，请在下面给我留言。
Stack Overflow用户
发布于 2021-03-18 07:09:16
在接受答案的基础上，您可能需要在此处添加
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;查看此answer
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18368202
复制相关文章
相似问题