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

Question

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

Answer 1

<progress>您可以通过更改background一些浏览器专有选择器的样式来设置元素中栏的颜色。

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

Answer 2

闪烁/铬

背景颜色

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

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

颜色

要为元素的 移动部分着色，color请使用以下命令：progress

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

---

壁虎/火狐

背景颜色

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

progress {background-color: #000;}

颜色

要为元素的 移动部分着色，color请使用以下命令：progress

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

---

Presto / 歌剧

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

---

Trident / Internet Explorer（和“Edge”）

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

背景颜色

progress {background-color: #000;}

颜色

progress {color: #aaa;}

WebKit / Safari

在某些时候，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>

Answer 3

目前，每个浏览器似乎处理进度条样式的方式不同，因此您需要像这样设置它：

progress {
/* style rules */
}
progress::-webkit-progress-bar {
/* style rules */
}
progress::-webkit-progress-value {
/* style rules */
} 
progress::-moz-progress-bar {
/* style rules */
}

WebKitChrome 和 Safari 的moz样式以及 Firefox 的样式。

从这里您可以简单地添加背景颜色background-color。

祝你好运！有任何疑问，请在下面给我留言。

Answer 4

在接受的答案之上，您可能想要添加

/* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

看到这个答案

Answer 5

progress {
  accent-color: red;
}