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 does not in Firefox.
I want my progress bar to be invisible/transparent in the background, and only the value/progress-itself to be white.
Any ideas for Firefox?
1 Answer
This CSS should work for at least 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; } Note that I needed to put a value in the progress bar for it to display consistently. Here's an example that seems to work:
