如何更改HTML5进度条的颜色 [英] How to change the color of HTML5 progress bar

问题描述

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

I have HTML progress bar, which values changes dynamically

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

1)I want to show the completed task in one color and remaining tasks in other color.

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

2)If the value exceeds the max value specified, then exceeded value must be show in diff color.

如何做到这一点。

推荐答案

你可以实现你所需要的使用css规则时，在设置进度条样式时必须记住的唯一重要事项是将它们放在一个选择器中会破坏地球上的每个浏览器（包括polyfilled的浏览器），因此您必须编写三个单独的规则其中包含相同的CSS属性。

you can achieve what you need by using css rules, the only important thing that you have to keep in mind while styling your progress bar is that putting them all together in one selector breaks every browser on the planet (including the polyfilled ones), so you have to write three separate rules with the same CSS properties in them.

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

First of all lets reset the css rule for the progress bar :

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中的颜色），您可以根据需要更改条形颜色：

The following rules are the basic selector for the most used browser. By changing the background-color (color in IE) you can change the bar color as you wish:

/* 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，...）：

The next thing to do is to change the color on a given value, for this you can use a selector constructed with progress + [value="value_to_style"]. In the following example i've used a particular rules [value^="9"] to apply the red color to the bar for all the value that start with 9 (91,92,93,...):

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

如果需要显示特殊颜色，如果值> max simpy使用上面规定了哪种样式可以放置一种特殊的背景颜色。

if you need to show a special color if value is > max simpy use the above rules where style to put a special background-color.

你可以在这个 jsFiddle

这篇关于如何更改HTML5进度条的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！