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>