html5修改进度条颜色,如何改变HTML5进度条

你可以通过使用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;

}

，如果你需要显示一个特殊的颜色，如果价值是>最大simpy使用上述规则，其中风格放置一个特殊的背景颜色。

你可以看到一个工作的例子，说明这种风格如何应用于这个jsFiddle