How can I set the color for the progress element?
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>Each browser seems to handle progress bar styling differently at the moment, and therefore you need to style it like this:
progress {
/* style rules */
}
progress::-webkit-progress-bar {
/* style rules */
}
progress::-webkit-progress-value {
/* style rules */
}
progress::-moz-progress-bar {
/* style rules */
}
WebKit styles for Chrome and Safari and moz styles for Firefox.
From here you can simply add a background colour with background-color.
Good Luck! Any queries, drop me a comment below.
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>