Firefox进度条样式

我在Firefox中遇到了HTML视频播放器进度条样式的问题。 Safari和Chrome都可以，但Firefox完全不同。应该没有“泡泡”，只有进度条边框具有正确的颜色。任何人有想法如何摆脱泡沫和填补酒吧背景？Firefox进度条样式

火狐：

铬：

Safari浏览器：

HTML：

<div id="progress"> 
      <input type="range" id="seek-bar" min="0" max="100" value="0" class="range" /> 
</div>

CSS：

.range { 
    -webkit-appearance: none; 
    background: linear-gradient(to right, 
    #444 0, #444 100%); 
    cursor: pointer; 
    height: 3px; 
    margin: 0; 
    transitionx: 0.1s ease-in; 
    vertical-align: bottom; 
    width: 100%; 
} 

.range::-webkit-slider-thumb { 
    -webkit-appearance: none; 
} 


#video-controls:hover .range::-webkit-slider-thumb { 
    width: 20px; 
    height: 20px; 
}

JS：

 // Update the seek bar as the video plays 
     video.addEventListener("timeupdate", function() { 
     // Calculate the slider value 
     var value = (100/video.duration) * video.currentTime; 
     // Update the slider value 
     seekBar.value = value; 
     updateText(video.currentTime); 
     $current.text((new Date(null, null, null, null, null, video.currentTime).toTimeString().match(/\d{2}:\d{2}:\d{2}/)[0]).substr(3)); //Update current time MM:ss 
     var $seekBar = $("#seek-bar"); 
     var val = $seekBar.val(); // Current video position 
     var buf = (video.buffered.end(0)/video.duration) * 100; // Calculates buffered % 
     $seekBar.css('background', 'linear-gradient(to right, #ff9900 0%, #ff9900 ' + val + '%, #777 ' + val + '%, #777 ' + buf + '%, #444 ' + buf + '%, #444 100%)'); 
    });

来源

2017-02-20 Deddy

可能的重复[如何自定义HTML5输入范围使用CSS类型看？]（http://stackoverflow.com/questions/3556157/how-to-customize-the-html5-input-range-type-looks-using-css）或http://stackoverflow.com/ q /215552分之22819334 –

下面是用于Firefox范围输入伪元素某些样式，这应该让你改变的默认值拇指（气泡），并跟踪：

.range{ 
    padding:0; 
    background: linear-gradient(to right, #444 0, #444 100%); 
} 
.range::-moz-range-track { 
    background: linear-gradient(to right, #444 0, #444 100%); 
    border: none; 
} 
.range::-moz-range-thumb { 
    background: rgba(0,0,0,0); /*hide the 'bubble'*/ 
} 

.range::-moz-focusring{ /*hide the outline behind the border*/ 
    outline: none; 
}

来源

2017-02-20 18:35:34 Corvae

Firefox进度条样式

回答

相关问题