Firefox进度条样式

Question

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

火狐：

铬：

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%)');
    });

Answer 1

以下是Firefox范围输入psuedo-elements的一些样式，可让您更改拇指（气泡）和轨道的默认值：

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