如何在IE10中设置<input type =“range”/>的样式

Question

我想在IE10中设置<input type='range' />元素的样式。

默认情况下，IE 10将这样的元素设置为样式：

我想稍微定制它，比如说，将颜色变为蓝色，红色，灰色变为黑色，将小条纹变为黄色，将小黑色洗涤器变为白色。我尝试覆盖CSS中的background-color属性和color属性。但它没有用。

有什么想法吗？

Answer 1

在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/

Answer 2

您可以使用Microsoft CSS伪元素：

• :: - ms-fill-lower
• :: - MS-填充上
• :: - MS-拇指
• :: - MS-蜱-前
• :: - MS-蜱-后
• :: - MS-蜱
• :: - MS-工具提示

Here the full Microsoft pseudo list...

<强> IE10

Here is a page with styled IE10 range controls （使用IE10打开）

<强>的WebKit

WebKit shadow DOM

其他浏览器

How to style range control for multiple browsers

A Sliding Nightmare

Answer 3

在上一个答案中，

::-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;
}

在曲目上方和下方创建额外的刻度。人们可以设定颜色和高度。无法设置刻度线宽度。 显示似乎是必需的。

Internet Explorer，因为IE10确实有默认的垂直填充。顶部填充为17px，底部填充为32px。这默认为高度滑块。因此

padding:0px;  

可能适用。 （见https://connect.microsoft.com/IE/feedback/details/792971/input-type-range-has-vertical-padding-by-default。）

（我还不能评论，我这样发帖）。