Page 136 - HTML5

}

Now, we can style the container itself

progress[value]::-webkit-progress-bar {
background-color: "green";
}

Firefox

Firefox styles the progress bar a little differently. We have to use these styles

progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox also renders a border */
}

Internet Explorer

Internet Explorer 10+ supports the progress element. However, it does not support the
background-color property. You'll need to use the color property instead.

progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

border: none; /* Remove border from Firefox */

width: 250px;
height: 20px;

color: blue;
}

HTML Fallback

For browsers that do not support the progress element, you can use this as a workaround.

<progress max="100" value="20">
<div class="progress-bar">
<span style="width: 20%;">Progress: 20%</span>
</div>
</progress>

Browsers that support the progress tag will ignore the div nested inside. Legacy browsers which
cannot identify the progress tag will render the div instead.

Read Progress Element online: https://riptutorial.com/html/topic/5055/progress-element

https://riptutorial.com/ 120