How to change the color of HTML5 progress bar

Question

I have HTML progress bar, which values changes dynamically

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

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

How to do this.

Answer 1

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.

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;

}

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;
}

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;
}

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.

You can see a working example of how the style can be applied in this jsFiddle