如何更改HTML5进度条的颜色

我有HTML进度条，它的值是动态变化的

1） 我想用一种颜色显示完成的任务，用另一种颜色显示剩余的任务

2） 如果该值超过指定的最大值，则必须以不同颜色显示超出的值

---

如何做到这一点。

您可以通过使用css规则来实现所需的功能，在设置进度条样式时，您必须记住的唯一重要一点是，将它们放在一个选择器中会破坏地球上的每个浏览器（包括多边形填充的浏览器），因此，您必须使用相同的CSS属性编写三个单独的规则

首先，让我们重置进度条的css规则：

progress,          /* All HTML5 progress enabled browsers */
{

    /* Turns off styling - not usually needed, but good to know. */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

}

以下规则是最常用浏览器的基本选择器。 通过更改背景颜色（IE中的颜色），您可以根据需要更改条形图的颜色：

/* IE10 */
progress {
    color: black;
}

/* Firefox */
progress::-moz-progress-bar { 
    background: black;  
}

/* Chrome */
progress::-webkit-progress-value {
    background: black;
}

下一步要做的是更改给定值的颜色，为此，您可以使用由

progress+[value=“value\u to\u style”]

构造的选择器。 在下面的示例中，我使用了特定的规则

[value^=“9”]

将红色应用于以9（91,92,93，…）开头的所有值的条形图：

如果您需要在值>max simpy时显示特殊颜色，请使用上面的规则where style来放置特殊背景色

您可以看到一个工作示例，说明如何在此应用样式

progress[value^="9"]::-moz-progress-bar {
background-color : red;
}