样式下部和上部填充HTML5范围输入

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">  

Answer 1

首先,阅读由Daniel Stern 撰写的使用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

Answer 2

有一个(newish？)伪元素用于Firefox的样式(IE调用)是范围输入的"较低"部分.根据文件:

的:: - MOZ-范围正在进行 CSS伪元素代表了"轨道"的部分(槽,其中又名拇指滑动的指示器)的<input>类型="范围",其对应于值低于当前值的由拇指选择.

对于上部赛道,您仍然使用(根据Alexander Dayan的回答)::-moz-range-track.

我今天才发现并尝试过它; 效果很好.

Answer 3

在这个阶段，仍然是本地实现的任何选项 -ms-fill-lower或者-moz-fill-lower在Chrome中。使用RangeSlider.js操作范围输入元素不是一种选择，所以我使用了 CSS 线性渐变和一点点 javascript 的调整技术来触发输入范围拇指移动的 css 更改希望这有助于某人检查 Codepen 上的示例