页面上具有不同颜色的多个<progress>元素

Question

我正在使用 <progress> 元素，并在 [样式] (http://html5doctor.com/the-progress-element/) 中找到了好的指南。

我想在页面上有多个进度条，并且希望它们具有不同的填充/值颜色。这是可能的吗？我是否可以通过调整我的 CSS 来实现这一点？或者我最好自己动手？谢谢！

.current-roll {
  -webkit-appearance: none;
  width: 80%;
  height: 25px;
  /* next line does nothing */
  color: #f7a700
}
.previous-roll {
  -webkit-appearance: none;
  width: 80%;
  height: 25px;
  /* next line does nothing */
  color: #98c11e
}
progress::-webkit-progress-bar {
  background: #d8d8d8;
}
progress::-webkit-progress-value {
  background: #f7a700;
}

<p>Orange bar</p>
<progress class="current-roll" value="0.5"></progress>

<p>Green bar</p>
<progress class="previous-roll" value="0.75"></progress>

- benevolentprof

---

你在所给的例子中已经拥有了你所寻找的东西。使用 progress.current-roll 专门为 .current-roll 样式化颜色。 - kukkuz

我知道我很接近，但我没有意识到有多接近。谢谢。 - benevolentprof

Answer 1

progress::-webkit-progress-value 是改变进度条颜色的属性。

举个例子：

progress.current-roll::-webkit-progress-value {
  background: #f7a700;
}

- Cory J.

Answer 2

你提供的示例已经包含了你要寻找的内容！

使用progress.current-roll来针对.current-roll特定地设置颜色。

下面是一个示例：

.current-roll {
  -webkit-appearance: none;
  width: 80%;
  height: 25px;
  /* next line does nothing */
  color: #f7a700
}
.previous-roll {
  -webkit-appearance: none;
  width: 80%;
  height: 25px;
  /* next line does nothing */
  color: #98c11e
}
progress.previous-roll::-webkit-progress-bar {
  background: #d8d8d8;
}
progress.previous-roll::-webkit-progress-value {
  background: #f7a700;
}
progress.current-roll::-webkit-progress-bar {
  background: #ddd;
}
progress.current-roll::-webkit-progress-value {
  background: red;
}

<p>Red bar</p>
<progress class="current-roll" value="0.5"></progress>

<p>Orange bar</p>
<progress class="previous-roll" value="0.75"></progress>

- kukkuz

---

我先看到了另一个回答，它给了我解决方案。直到我刷新页面后才看到了你的评论。抱歉！ - benevolentprof