Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I set the color for the progress element?

Tags:

html

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?

like image 937
Rolando Avatar asked Aug 21 '13 21:08

Rolando


People also ask

How do I change the color of my progress in HTML?

You can style the color of the bar in the <progress> element by changing the background of a few browser-proprietary selectors.

How do I customize my progress bar in HTML?

In the stylesheet, we actually can use the element selector to target and add style rules to <progress> element. In this example, we change the background color, remove the border line, and make it rounded by adding a border radius at half of its height.


2 Answers

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>
like image 144
nullability Avatar answered Oct 07 '22 15:10

nullability


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>
like image 42
John Avatar answered Oct 07 '22 15:10

John