样式较低和上方填充HTML5范围输入

如 here所述,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">

解决方法

首先,阅读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