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

Question

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

默认情况下,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-拇指,而刻度线可以与风格::-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-填充低
• :: - MS-填充上
• :: - MS-拇指
• :: - MS-蜱,前
• :: - MS-蜱,后
• :: - MS-蜱
• :: - MS-提示

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

IE10

这是一个带有样式IE10范围控件的页面 (用IE10打开)

WebKit的

WebKit影子DOM

其它浏览器

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

一个滑动的噩梦