User288213138 posted
Hi mpodolski,
I suggest you take a look at what these pseudo-elements mean.
The ::-moz-progress-bar represents the progress bar inside a <progress> element.
The ::-webkit-progress-bar represents the entire bar of a <progress> element. Normally it's only visible as the unfilled portion of the bar, since by default it's rendered below the ::-webkit-progress-value pseudo-element. It is a child of the ::-webkit-progress-inner-element
pseudo-element and the parent of the ::-webkit-progress-value pseudo-element.
The ::-webkit-progress-value represents the filled-in portion of the bar of a <progress> element. It is a child of the ::-webkit-progress-bar pseudo-element.
Note: for ::-webkit-progress-value and ::-webkit-progress-bar to take effect, appearance needs to be set to none on the <progress> element.
And you can change the color for process bar as below
code:
<div>
<progress min="0" max="100" value="63" />
</div>
<style>
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;
}
</style>
Best regards,
Sam