样式 lower 和 upper 填充 HTML5 range input

Question

如此 处 所述，IE 允许在 CSS 中对下部和上部填充或轨道区域进行样式设置，如下所示：

 /* The following only affects the range input in IE */

input[type="range"]::-ms-fill-lower {
  background-color: red;
}

input[type="range"]::-ms-fill-upper {
  background-color: blue;
}

 <input type="range">

有谁知道使用 CSS 或任何 JS 库将 不同样式 应用于 Firefox、Chrome 等中范围输入的上下轨道的方法？

更新：

正如 Wilson F 所指出的，Firefox 现在支持这一点：

 /* The following only affects the range input in FF */

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

input[type="range"]::-moz-range-track {
  background-color: blue;
}

 <input type="range">

原文由 Ben Cook 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，阅读 Daniel Stern 的文章 Styling Cross-Browser Compatible Range Inputs with CSS 。他的想法是使输入不可见，然后应用自定义样式。

他还开发了一个名为 randge.css 的出色在线工具，您可以在其中选择样式预设和参数并获得自动生成的 CSS 代码，如下所示：

 input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ac51b5;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}

body {
  padding: 30px;
}

 <input type="range">

是的，只有 CSS 才能在 IE 上实现，但如果你不介意添加一些脚本，它可以用线性渐变来模拟。请参阅以下示例： codepen.io/ryanttb/pen/fHyEJ

原文由 Alexander Dayan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Firefox 有一个（新的？）伪元素，用于设置范围输入的“较低”部分的样式（IE 称之为）。根据 文档：

::-moz-range-progress CSS 伪元素表示 type=“range” 的 <input> 的“轨道”（指示器又名拇指滑动的凹槽）部分，它对应于到低于拇指当前选择的值的值。

对于上轨，您仍然使用（根据 Alexander Dayan 的回答） ::-moz-range-track 。

我今天才发现并尝试过；效果很好。

原文由 Wilson F 发布，翻译遵循 CC BY-SA 3.0 许可协议