HTML - 更改进度条颜色

Question

所以我有一个看起来像这样的进度条：

.progress {
  border: none;
}

.red,
 ::-webkit-progress-bar {
  background-color: lightgray;
  color: red;
}

.blue,
 ::-webkit-progress-bar {
  background-color: lightgray;
  color: blue;
}

.orange,
 ::-webkit-progress-bar {
  background-color: lightgray;
  color: orange;
}

.green,
 ::-webkit-progress-bar {
  background-color: lightgray;
  color: green;
}

<h1>The progress element</h1>
<label class="progress">Downloading progress:</label><br>
<progress class="red" value="32" max="100"> 32% </progress><br>
<progress class="blue" value="32" max="100"> 32% </progress><br>
<progress class="orange" value="32" max="100"> 32% </progress><br>
<progress class="green" value="32" max="100"> 32% </progress>

不知怎的，颜色不会改变。我已将它们全部添加为课程，但无法弄清楚这一点。我究竟做错了什么？

Answer 1

现代浏览器的首选方法是accent-color.

.progress {
  border: none;
}

.red {
  accent-color: red;
}

.blue {
  accent-color: blue;
}

.orange {
  accent-color: #C07B00;
}

.green {
  accent-color: green;
}

<h1>The progress element</h1>
<label class="progress">Downloading progress:</label><br>
<progress class="red" value="32" max="100"> 32% </progress><br>
<progress class="blue" value="32" max="100"> 32% </progress><br>
<progress class="orange" value="32" max="100"> 32% </progress><br>
<progress class="green" value="32" max="100"> 32% </progress>

Chrome 似乎已经放弃了对其-webkit-progress伪选择器的支持，而 Firefox 的实现也存在缺陷，很可能也会被放弃。accent-color受 Firefox、Chrome 和 Safari 支持，并且是目前唯一有规范的方法，尽管它们仍处于起草阶段。

注意： Chrome（以及 Edge）目前会根据强调色的明亮程度自动将背景颜色从白色切换为深灰色。