CODEWITHSUNDEEP
htmlcssfirefoxprogress-bar
matt
matt

Reputation: 44393

Firefox: Styling of 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 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?

Upvotes: 6

Views: 8442

Answers (1)

tagawa
tagawa

Reputation: 4611

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: http://jsfiddle.net/jn6addvg/

Upvotes: 4

Related Questions