Is it possible to set the color of the "bar" for the <progress>
element in HTML (when you specify a value, the bar is filled up to the point of the value)? If so, how? background-color
and background
don't seem to have any effect. Is the technique cross compatible with the latest version of all browsers?
You can style the color of the bar in the <progress>
element by changing the background
of a few browser-proprietary selectors.
In Firefox, you can use the following:
progress::-moz-progress-bar { background: blue; }
In Chrome or Safari, you can use:
progress::-webkit-progress-value { background: blue; }
In IE10, you just need to use the color
attribute:
progress { color: blue; }
Source: http://html5doctor.com/the-progress-element/
Altogether, that makes:
progress::-moz-progress-bar { background: blue; }
progress::-webkit-progress-value { background: blue; }
progress { color: blue; }
<progress value="0" max="100"></progress><br>
<progress value="25" max="100"></progress><br>
<progress value="50" max="100"></progress><br>
<progress value="75" max="100"></progress><br>
<progress value="100" max="100"></progress><br>