css - How to style in IE10

Question

I want to style the <input type='range' /> element in IE10.

By default, IE 10 style the element like this:

I want to customize it a bit, say, changing the color blue to red, grey to black, the little bars to yellow, the little black scrubber to white. I tried overwriting the background-color property and the color property in CSS. But it didn't work.

Any ideas?

Answer 1

您可以使用 Microsoft CSS 伪元素：

• ::-ms-fill-lower
• ::-ms-fill-upper
• ::-ms-拇指
• ::-ms-ticks-before
• ::-ms-ticks-after
• ::-ms-滴答声
• ::-ms-工具提示

这里是完整的 Microsoft 伪列表...

IE10

这是带有样式的 IE10 范围控件的页面 （使用 IE10 打开）

网络套件

WebKit 影子 DOM

其它浏览器

如何为多个浏览器设置样式范围控件

滑动的噩梦

Answer 2

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

在轨道上方和下方创建额外的刻度。可以设置它们的颜色和高度。无法设置刻度宽度。显示似乎是必需的。

自 IE10 以来的 Internet Explorer 确实具有默认的垂直填充。上边距为 17px，下边距为 32px。默认情况下，这会产生一个高度滑块。所以

padding:0px;  

可以应用。（请参阅https://connect.microsoft.com/IE/feedback/details/792971/input-type-range-has-vertical-padding-by-default。）

（因为我还不能发表评论，所以我这样发布）。