如
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