正如所解释的here http://www.hongkiat.com/blog/html5-range-slider-style/，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 等中输入范围的上下轨道？
UPDATE:
正如所指出的Wilson F https://stackoverflow.com/questions/28283332/style-lower-and-upper-fill-in-html5-range-input#answer-35304755，现在 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">
首先，阅读文章使用 CSS 设置跨浏览器兼容范围输入的样式 http://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/作者：丹尼尔·斯特恩。他的想法是使输入不可见，然后应用自定义样式。
他还开发了一个优秀的在线工具，名为范围.css http://danielstern.ca/range.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 http://codepen.io/ryanttb/pen/fHyEJ
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
