如何更改HTML5进度条的颜色

Question

我有HTML进度条，它动态地更改值

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

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

这该怎么做。

Answer 1

你可以通过使用css规则来实现你所需要的，在设置你的进度条时你必须记住的唯一重要的事情就是将它们放在一个选择器中会破坏地球上的每个浏览器（包括polyfilled规则），所以你必须编写三个单独的规则，其中包含相同的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_to_style"]构造的选择器。在下面的例子中，我使用特定的规则[value^="9"]将红色应用于条形图，以获取以9开头的所有值（91,92,93，...）：

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

如果你需要显示一个特殊的颜色，如果值> max simpy使用上面的规则，其中样式放置一个特殊的背景颜色。

您可以在此jsFiddle中看到如何应用样式的工作示例