HTML5 进度条的样式

Question

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

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

（我正在使用 safari）

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

HTML5 进度条的样式

Styling of HTML5 progress bars

html

javascript

css

progress-bar