Firefoxの進行状況バーのスタイル

Question

FirefoxでHTMLビデオプレーヤーの進行状況バーのスタイルに問題があります。 SafariとChromeは大丈夫ですが、Firefoxとはまったく異なります。 「バブル」はなく、プログレスバーの境界線のみが正しい色で表示されます。誰でもバブルを取り除き、バーの背景を埋める方法を知っていますか？

のFirefox：

クローム：

サファリ：

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