Having an issue with my progress bar design... When viewed in Chrome, the value of the progress bar appears in red due to CSS styling I applied... But when opened in Mozilla, it shows up as a dull grey color.
progress[value] {
width: 250px;
height: 10px;
}
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 250px;
height: 24px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-bar {
background-color: #eee;
border-radius: 5px;
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-value {
background-color:#ff0000;
-moz-border-radius: 5px;
background-size: 35px 20px, 100% 100%, 100% 100%;
opacity:0.6;
}
progress[value]::-webkit-progress-value {
background:red;
border-radius: 5px;
background-size: 35px 20px, 100% 100%, 100% 100%;
opacity:0.6;
}
Need the progress bar value to be displayed in red on Mozilla browsers as well, appreciate any help!