How to set color for CSS3 html5 progress element?

Question

Is it possible to set the color of the \"bar\" for the element in HTML5 (when you specify a value, the bar is filled up to the point of the value)? If so, how? background-c

Answer 1

WebKit / Blink

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

---

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