csshtmlprogress-bar

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

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?

Solution 

  • 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>