HTML Progress Element Changing the color of a progress bar
Example
Progress bars can be styled with the progress[value] selector.
This example gives a progress bar a width of 250px and a height of 20px
progress[value] {
width: 250px;
height: 20px;
}
Progress bars can be especially difficult to style.
Chrome / Safari / Opera
These browsers use the -webkit-appearance selector to style the progress tag. To override this, we can reset the appearance.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
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;
}
