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

user_8417433 0
Viewed 41957

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?

progress-bar css html
2 Answers

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