HTML5 进度条的样式答案

【问题标题】：Styling of HTML5 progress barsHTML5 进度条的样式
【发布时间】：2021-08-10 23:39:18
【问题描述】：

我正在制作一个包含 HTML5 进度条的游戏，但是我有不止一个，并且希望颜色不同。我目前有将所有进度条设置为一种颜色的样式，但我不确定如何使不同的进度条具有不同的颜色。这是我当前的 CSS：

progress::-webkit-progress-bar {
background-color: gray;
}
progress::-webkit-progress-value {
background-color: lime;
}

（我正在使用 Safari）

【问题讨论】：

您可以使用 CSS 类或 ID 来区分进度条并为每个进度条设置不同的样式。
不幸的是，我必须在该类中为 WebKit 定义类，但不确定如何
进度元素本身可能有类“class1”或“class2”或“class3”......只需使用progress.class1::--webkit-porgess-bar {等，或者进度条的祖先元素可能有不同的类...... . 所以.class1 progress::--webkit-porgess-bar { 等
如果您可以向我们展示您的 HTML 示例，这会有所帮助。

标签： javascript html css progress-bar

【解决方案1】：

您可以为不同的进度条使用不同的类。

progress {
  -webkit-appearance: none;
}
.progress1::-webkit-progress-bar {
  background-color: gray;
}

.progress1::-webkit-progress-value {
    background-color: lime;
}

.progress2::-webkit-progress-value {
    background-color: orange;
}

<progress class="progress1" value="32" max="100"> 32% </progress>
<progress class="progress2" value="32" max="100"> 32% </progress>

【讨论】：