80

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?

Improve this question

9 Answers 9

Reset to default
62

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

If the progress element had an id of 'myprogressbar', then how would you do the Chrome one? #myprogressbar{-webkit-progress-value{background:blue}} does not appear to work.
It should be #myprogressbar::-webkit-progress-value {background: blue; }
@nullability sorry for the bump, but I tried what you suggested (in regards to attaching it to a class) and it didn't work, could you please show me an example through JSFiddle? Not sure what to Google to find out how to do it...
if i trying to change any other color it automatically changed as green color how to fix this
This works too. EX: <progress style="accent-color: rgb(104, 238, 104);">50</progress> IF you have the latest chrome installed.
|
42

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>

Improve this answer

1 Comment

This is the most comprehensive answer but needs some updates. Opera now uses Blink and is under active development. IE is no longer supported since June 15, 2022 and Edge uses Blink too. The !important flag should not be needed.
35 
progress {
  accent-color: red;
}
Improve this answer

2 Comments

Shockingly, this works, but also sets the background to a charcoal black.
This works on Chrome, but not on Safari or Firefox.
12

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.

Improve this answer

2 Comments

This is exactly True: Chrome (and by extension, Edge) currently automatically switches the background color from white to dark grey, depending on how bright the accent color is.
The accent-color style works on Chrome, but not on Safari or Firefox.
10

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.

Improve this answer

1 Comment

If i do this, it does not show progress and fills whole bar with the color
4

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>

Improve this answer

Comments

1

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

Improve this answer

Comments

1

All major Browsers support doing this via the accent-color property since 2022.
accent-color is not considered as being Baseline available because Safari and all Android/iOS variants of browsers (except Firefox) not maintaining 'minimum contrast for legibility' when changing this property.

This means it is possible to use everywhere, but you may need to check the result for readability/accessibility, especially on mobile.

Improve this answer

Comments

0

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

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.