Search code examples
htmlcssprogress-bar

How can I set the color for the progress element?

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?

Solution

  • 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>