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>

Answer 3

progress {
  accent-color: red;
}

Answer 4

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 5

The preferred method going forward for modern browsers is accent-color.

Used as shown:

progress { accent-color: blue; }
/*or*/
#ID, .class { accent-color: blue; }

It seems that Chrome has already dropped support for its -webkit-progress psuedo-selectors, and Firefox's implementation is buggy and likely to be dropped as well. accent-color is supported by Firefox, Chrome and Safari, and is currently the only method with specifications, although they're still in drafting.

Note: Chrome (and by extension, Edge) currently automatically switches the background color from white to dark grey, depending on how bright the accent color is.

Answer 6

On top of the accepted answerhere you might want to add

/* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

See this answer

Answer 7

progress::-moz-progress-bar {background-color: #C8DED8;}

progress::-webkit-progress-bar {background-color: #C8DED8;}

progress::-webkit-progress-value {background-color: #E7B92A;}

progress {border-radius: 8px; overflow: hidden; height: 6px;}

Answer 8

As of August 2023, this is the simplest way I've found to recolor progress bars in Chrome, Firefox and Safari. accent-color doesn't seem to work. But you can set color on the progress element and then reference it in the various pseudo-classes you need, so if you want progress bars in multiple colors, you only need to change one property.

progress {
    color: darkmagenta;

    /* Firefox: Unfilled portion of the progress bar */
    background: lightgrey;
}

/* Firefox: Filled portion of the progress bar */
progress::-moz-progress-bar {
    background: currentColor;
}

/* Chrome & Safari: Unfilled portion of the progress bar */
progress::-webkit-progress-bar {
    background: lightgrey;
}

/* Chrome & Safari: Filled portion of the progress bar */
progress::-webkit-progress-value {
    background: currentColor;
}

/* Easily change the color */
progress.red {
    color: darkred;
}
progress.blue {
    color: darkblue;
}

<progress value=".25">25%</progress> <br/>
<progress value=".33" class="red">33%</progress> <br/>
<progress value=".5" class="blue">50%</progress>

You can apply more rules, like border and border-radius, to each of the selectors above to further style your progress bar, like so:

progress {
    color: darkmagenta;
    height: 9px;
    width: 100%;
    border-radius: 10px;

    /* Firefox: Unfilled portion of the progress bar */
    background: white;
    border: 1px solid currentColor;
}

/* Firefox: Filled portion of the progress bar */
progress::-moz-progress-bar {
    background: currentColor;
    border-radius: 10px;
}

/* Chrome & Safari: Unfilled portion of the progress bar */
progress::-webkit-progress-bar {
    background: white;
    border-radius: 10px;
}

/* Chrome & Safari: Filled portion of the progress bar */
progress::-webkit-progress-value {
    background: currentColor;
    border-radius: 10px;
}

/* Easily change the color */
progress.red {
    color: darkred;
}
progress.blue {
    color: darkblue;
}

<progress value=".25">25%</progress> <br/>
<progress value=".33" class="red">33%</progress> <br/>
<progress value=".5" class="blue">50%</progress>