Clever Geek Handbook

How can I change the color of the execution line 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>
Run codeHide result


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

+3


source to share


1 answer 




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

progress {
  color: lightblue;
}

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

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

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>
Run codeHide result


+6


source






More articles:


All Articles