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

Question

我正在使用该元素，并且我发现了关于 [样式] ( 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>

Answer 1

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

例子

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