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

【问题标题】：Multiple <progress> elements on a page with different colors页面上有多个不同颜色的 <progress> 元素
【发布时间】：2016-08-24 16:19:07
【问题描述】：

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

【问题讨论】：

您已经拥有了您在给出的示例中寻找的内容。例如，使用progress.current-roll 专门为.current-roll 设置颜色样式
我知道我很接近，但我没有意识到有多接近。谢谢。

标签： css html pseudo-element

【解决方案1】：

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

例子

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

【讨论】：

【解决方案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>

【讨论】：

我首先看到了另一个答案，它为我提供了解决方案。直到后来我刷新页面时才看到您的评论。对不起！