Firefox: styling progress bar value?
Html
<progress id='video-progress' min='0' max='100' value=''></progress>
CSS
#video-progress {
border: none;
position:fixed;
bottom:0;
left:0;
height:3px;
width:100%;
z-index:1;
background: transparent !important;
}
#video-progress::-webkit-progress-bar {
background: transparent !important;
}
#video-progress::-moz-progress-bar {
background: transparent !important;
}
#video-progress[role][aria-valuenow] {
background: transparent !important;
}
#video-progress::-webkit-progress-value {
background: #fff !important;
}
#video-progress::-moz-progress-value {
background: #fff !important;
}
#video-progress[aria-valuenow]:before {
background: #fff !important;
}
This works fine in Chrome, but not Firefox.
I want my progress bar to be invisible / transparent in the background and only the value / progress-itself is white.
Any ideas for Firefox?
+3
source to share
1 answer
This CSS should work at least for Firefox and Chrome (I don't have IE to test):
body {
background: #333;
}
#video-progress {
background: transparent;
border: none; /* Needed for Firefox */
color: #fff; /* For IE10 */
-webkit-appearance: none; /* Needed for WebKit/Blink */
}
#video-progress::-moz-progress-bar {
background: #fff;
}
#video-progress::-webkit-progress-value {
background: #fff;
}
#video-progress::-webkit-progress-bar {
background: transparent;
}
Please note that I needed to put the value in the progress bar in order for it to be displayed sequentially. Here's an example that seems to work: http://jsfiddle.net/jn6addvg/
+3
source to share