How can I set the color for the progress element?

Question

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?

Answer 1

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>

Answer 2

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>