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?

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>

Blink / Chrome

background-color

To color the background-color of a progress element (the part that does not increase/decrease) in WebKit browsers use the following:

progress::-webkit-progress-bar {background-color: #000; width: 100%;}

color

To color the effective color of the moving part of a progress element use the following:

progress::-webkit-progress-value {background-color: #aaa !important;}

Gecko / Firefox

background-color

To color the background-color of a progress element (the part that does not increase/decrease) in Gecko browsers use the following:

progress {background-color: #000;}

color

To color the effective color of the moving part of a progress element use the following:

progress::-moz-progress-bar {background-color: #aaa !important;}

Presto / Opera

I've unofficially dropped support for Opera since they've stopped developing it. For those confused and think Opera is still being developed - that is just an obviously rebranded copy of Chrome. Do not test browsers, test engines!

Trident / Internet Explorer (and "Edge")

When Microsoft actually makes the effort they really do actually come through, this one actually makes perfect straight-forward sense.

background-color

progress {background-color: #000;}

color

progress {color: #aaa;}

WebKit / Safari

At some point WebKit/Safari stopped working with Chrome (or vice-versa); this is tested on Safari 14.0.3 as of 2021-03-13.

background-color

progress[value]::-webkit-progress-bar {background-color: #000;}

color

progress[value] {-webkit-appearance: none;}
progress[value]::-webkit-progress-value {background-color: #fff;}

Putting it all together, that makes:

/* background: */
progress::-webkit-progress-bar {background-color: black; width: 100%;}
progress {background-color: black;}

/* value: */
progress::-webkit-progress-value {background-color: green !important;}
progress::-moz-progress-bar {background-color: green !important;}
progress {color: green;}

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