How can I change the color of a progress bar value in HTML?

Question

progress {
  border: none;
  width: 400px;
  height: 60px;
  background: crimson;
}

progress {
  color: lightblue;
}

progress::-webkit-progress-value {
  background: lightblue;
}

progress::-moz-progress-bar {
  background: lightcolor;
}

<div>
  <progress min="0" max="100" value="63" />
</div>

I have tried nearly everything, but the value color of the progress bar remains the same. The only browser that is responsive to a change is IE. Firefox allows to change background color only. Chrome doesn't show anything at all. Can you spot what is wrong with my code?

Cay

css-tricks.com/html5-progress-element – Cioban

By default this is styled by the OS/browser, but you can override it with ie. -webkit-appearance (see css-tricks.com/html5-progress-element/#article-header-id-4) – Twine

typo in -moz-progress-bar? lighcolor=lightblue? But works for me in Firefox. jsfiddle.net/t0znpjht – Palmapalmaceous

You want to replace default background of progress (gray color by default), yes? – Hodman

@VadimOvchinnikov no, I want to change the color of progress bar value – Cay

@Cay background: lightblue; works in Chrome. Do you agree with this? – Hodman

@VadimOvchinnikov well it works in IE and now in Firefox as well. As for Chrome it shows nothing literally - blank screen... – Cay

@Cay Does RenzoCC's answer work for you? – Hodman

@VadimOvchinnikov I still got issues with Chrome though but other browsers seem to work fine now – Cay

Answer 1

progress {
  border: none;
  width: 400px;
  height: 60px;
  background: crimson;
}

progress {
  color: lightblue;
}

progress::-moz-progress-bar {
  background: lightblue;
}

progress::-webkit-progress-value {
  background: red;
}

progress::-webkit-progress-bar {
  background: blue;
}

It will work on webkit browser, like this example

<div>
  <progress min="0" max="100" value="63" />
</div>

Brisson

why have you color property in another CSS rule, it can be put in first one also, right? – Merit

why is there twice "progress::-webkit-progress-value {}"? – Lifetime

it is not necessary to have "progress:-webkist-progress-value" twice, the answer has been updated – Brisson

it is showing different color in chrome and firefox – Poppy

Answer 2

Instead of making your own progress bar, you can simply use the accent-color variable instead of color or background.

progress {
  width: 400px;
  height: 60px;
}

.colored {
  accent-color: red;
}

<div>
  <p>Default: <progress min="0" max="100" value="63" /></p>
  <p>Colored: <progress class="colored" min="0" max="100" value="63" /></p>
</div>

Aruwimi

A much better and cleaner solution than the one marked as answer. Tested on Chrome, Mozilla ad Edge – Mop

Answer 3

progress {
  width: 400px;
  height: 60px;
}

.colored {
  accent-color: red;
}

Mure

Answer 4

it's pretty limited as to what you can dom but this this must do the trick

progress {
   -webkit-appearance: none;
}
progress::-webkit-progress-bar-value {
  -webkit-appearance: none;
  background: orangered;
}

Densmore

::-webkit-progress-bar-value is invalid – Talipes

Answer 5

use this

accent-color:"#fff

Demy

A code-only answer is not high quality. While this code may be useful, you can improve it by saying why it works, how it works, when it should be used, and what its limitations are. Please edit your answer to include explanation and link to relevant documentation. – Philine