Firefox进度条样式

Question

I have a problem with HTML video player progress bar style in Firefox. Safari and Chrome are okay, but Firefox is completely different. There should be no "bubble" and only the progress bar border is with the right colour. Anyone have idea how to get rid of the bubble and fill the bars background?

Firefox:

Chrome:

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

Here are some styles for Firefox range input psuedo-elements, which should let you change the defaults for the thumb(bubble) and the track:

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