css - 如何仅使用 CSS 填充拇指左侧的 HTML5 input[type=range]？

Question

是否有可能在 Firefox 上获得与 ::-ms-fill-lower 相同的效果？不用JS？

我已经找到了一种解决方法，以便在使用伪元素 :before 和 :after 的基于 webkit 的浏览器(例如 Google Chrome)上实现这种效果。但它不适用于 Firefox 元素。似乎 ::-moz-range-thumb::before 和 ::-moz-range-thumb::after 在 Firefox 上不是合法操作，而 Google Chrome 支持 ::-webkit-slider-thumb::before 和 ::-webkit-slider-thumb::after

这是 Firefox 版本的基本大纲:

input[type="range"].slider-track {
  border: none;
  margin: 10px 0;
  width: 100%;
  height: 30px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: visible;
  background: transparent;
}

input[type="range"].slider-track::-moz-range-thumb {
    box-shadow: none;
    border: 2px solid grey;
    height: 16px;
    width: 16px;
    border-radius: 16px;
    background: white;
}

input[type="range"].slider-track::-moz-range-track {
    width: 100%;
    height: 2px;
    box-shadow: none;
    background: blue;
    border-radius: 0px;
    border: 0px;
}

<div style="max-width: 380px;">
    <input type="range" class="slider-track" id="mySlider1"></input>
</div>

Answer 1

对不起!我在发布此消息后 20 分钟找到了答案……我整天都在寻找答案……答案如下:

使用 ::-moz-range-progress 元素!

示例(适用于代码段)

input[type="range"].slider-track::-moz-range-progress {
      background: red;
}