我想在 IE10 中设置 <input type='range' /> 元素的样式。
默认情况下，IE 10 的元素样式如下：
我想对其进行一些自定义，例如，将蓝色变为红色，灰色变为黑色，小条变为黄色，黑色小刷子变为白色。我尝试在 CSS 中覆盖 background-color 属性和 color 属性。但它没有用。
有什么想法吗？
【问题讨论】：
标签： css input internet-explorer-10
您可以使用 Microsoft CSS 伪元素：
Here the full Microsoft pseudo list...
IE10
Here is a page with styled IE10 range controls （用IE10打开）
WebKit
其他浏览器
【讨论】：
您可以使用许多伪元素来设置 IE10 中范围控件的样式。
input[type="range"]::-ms-fill-upper {
background-color: green;
}
将为拇指后的部分着色。在拇指使用之前设置样式：
input[type="range"]::-ms-fill-lower {
background-color: lime green;
}
参见例如http://jsfiddle.net/K8WyC/4/
要设置拇指样式，您可以使用 ::-ms-thumb，而刻度线可以使用 ::-ms-ticks-before、::-ms-ticks-after 或 ::-ms-track 设置样式（后者设置两侧样式）。您可以在http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx
您要求的样式可以像下面的小提琴一样实现：http://jsfiddle.net/K8WyC/8/
【讨论】：
input range元素的“拖尾”事件是什么吗？
MSPointerUp
在上一个答案中，
::-ms-ticks
应该阅读
::-ms-track
（这只是普通的轨道）。刻度颜色由
设置::-ms-track {color:red;}
刻度高度是轨道的高度，不能设置宽度。众所周知，通过
::-ms-track {color:transparent;}
伪元素
::-ms-ticks-before,
::-ms-ticks-after {
display:block; (or inline-block)
color:red;
height:10px;
}
在轨道上方和下方创建额外的刻度。可以设置它们的颜色和高度。无法设置刻度宽度。 显示 似乎是必需的。
自 IE10 以来的 Internet Explorer 确实具有默认的垂直填充。上边距为 17px，下边距为 32px。默认情况下，这会产生一个高度滑块。因此
padding:0px;
（由于我还不能发表评论，所以我就这样发布）。
【讨论】：