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

Question

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

默认情况下，IE 10 的元素样式如下:

我想对其进行一些自定义，例如，将颜色从蓝色更改为红色，将灰色更改为黑色，将小条更改为黄色，将黑色的小洗涤器更改为白色。我尝试覆盖 background-color属性(property)和color CSS 中的属性。但它没有用。

有什么想法吗？

Answer 1

您可以使用 Microsoft CSS 伪元素:

• ::-ms-fill-lower
• ::-ms-fill-upper
• ::-ms-拇指
• ::-ms-ticks-before
• ::-ms-ticks-after
• ::-ms-ticks
• ::-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