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

Answer 2

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.

Answer 3

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/