如何设置进度元素的颜色？

Question

是否可以在 HTML 中为 <progress> 元素设置“栏”的颜色（当您指定一个值时，栏会填充到值的点）？如果是这样，如何？ background-color 和 background 似乎没有任何效果。该技术是否与所有浏览器的最新版本交叉兼容？

原文由 Rolando 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

总而言之，这使得：

 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>

原文由 nullability 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

闪烁/镀铬

背景颜色

要为 WebKit 浏览器中的 progress 元素（不增加/减少的部分）的 --- background-color 着色，请使用以下代码：

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

颜色

要为 a progress 元素的 移动 部分的 有效 color 着色，请使用以下代码：

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

---

壁虎/火狐

背景颜色

要在 Gecko 浏览器中为 progress 元素（不增加/减少的部分）的 --- background-color 着色，请使用以下代码：

 progress {background-color: #000;}

颜色

要为 progress 元素的 移动 部分的 有效 color 着色，请使用以下代码：

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

---

急板/歌剧

我已经非正式地放弃了对 Opera 的支持，因为他们已经停止开发它。对于那些感到困惑并认为 Opera 仍在开发中的人来说——这只是 Chrome 的一个明显更名的副本。 不要 测试浏览器，测试引擎！

---

Trident / Internet Explorer（和“Edge”）

当微软真正做出他们真正所做的努力时，这实际上是完美的直截了当的意义。

背景颜色

progress {background-color: #000;}

颜色

progress {color: #aaa;}

WebKit / 野生动物园

在某些时候，WebKit/Safari 停止与 Chrome 一起工作（反之亦然）；截至 2021 年 3 月 13 日，这已在 Safari 14.0.3 上进行了测试。

背景颜色

progress[value]::-webkit-progress-bar {background-color: #000;}

颜色

progress[value] {-webkit-appearance: none;}
progress[value]::-webkit-progress-value {background-color: #fff;}

---

把它们放在一起，这使得：

 /* background: */
progress::-webkit-progress-bar {background-color: black; width: 100%;}
progress {background-color: black;}

/* value: */
progress::-webkit-progress-value {background-color: green !important;}
progress::-moz-progress-bar {background-color: green !important;}
progress {color: green;}

 <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>

原文由 John 发布，翻译遵循 CC BY-SA 4.0 许可协议