Firefox 进度条样式

Question

我在 Firefox 中遇到了 HTML 视频播放器进度条样式的问题。 Safari 和 Chrome 没问题，但 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%)');
    });

Answer 1

这里有一些 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;
}