Comment puis-je modifier la couleur d'une valeur de barre de progression en 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>

J'ai essayé presque tout, mais la couleur de la valeur de la barre de progression reste le même. Le seul navigateur qui réagit à une modification est IE. Firefox permet de changer la couleur d'arrière-plan seulement. Chrome ne montre rien du tout. Pouvez-vous repérer ce qui ne va pas avec mon code?

Answer 1

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>