Firefox：进度条值的样式？答案

【问题标题】：Firefox: Styling of progress bar value?Firefox：进度条值的样式？
【发布时间】：2014-12-15 08:53:37
【问题描述】：

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;
}

这在 Chrome 中可以正常工作，但在 Firefox 中则不行。

我希望我的进度条在背景中不可见/透明，只有值/进度本身是白色的。

对 Firefox 有什么想法吗？

【问题讨论】：

标签： html css firefox progress-bar

【解决方案1】：

这个 CSS 至少应该适用于 Firefox 和 Chrome（我没有 IE 来测试）：

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;
}

请注意，我需要在进度条中输入一个值，以使其始终显示。这是一个似乎有效的示例： http://jsfiddle.net/jn6addvg/

【讨论】：