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

Question

我正在使用该元素，并且找到了关于[样式] (http://html5doctor.com/the-progress-element/) 的很好的说明。

我希望在一个页面上有多个进度条，并且我希望它们具有不同的 fill/value 颜色。这可能吗？我可以通过调整我的 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>

Answer 1

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

例子

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

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>

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

Multiple <progress> elements on a page with different colors

html

css

pseudo-element