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 有什么想法吗?
最佳答案
这个 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/
关于html - Firefox:进度条值的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27480331/