Internet Explorer 11 css样式的范围滑块

I would like to style range slider with css but all examples I found are not styled in internet explorer 11 where slider looks like so:

我想用CSS调整范围滑块，但我找到的所有示例都没有在Internet Explorer 11中设置样式，其中滑块如下所示：

Do you know how to style it and why only ie 11 show no style when defined?

你知道如何设计风格吗？为什么只有11在定义时没有显示风格？

1 个解决方案

#1

IE11 gives you a few pseudo elements related to the range input, which you can read about here.

IE11为您提供了一些与范围输入相关的伪元素，您可以在这里阅读。

1. ::-ms-fill-lower controls styling of the sliders track before the slider thumb

   :: - ms-fill-lower控制滑块拇指前滑块轨迹的样式

2. ::-ms-fill-upper same as above, but after the thumb

   :: - ms-fill-upper与上面相同，但是在拇指之后

3. ::-ms-thumb - for the slider thumb itself.

   :: - ms-thumb - 用于滑块拇指本身。

4. ::-ms-tooltip - controls styling of the tooltip of a slider

   :: - ms-tooltip - 控制滑块工具提示的样式

5. ::-ms-track styles the sliders individual tracks.

   :: - ms-track样式滑块单个轨道。

An example fiddle

一个例子小提琴

::-ms-fill-lower {
    background: coral;
}

::-ms-fill-upper {
    background: peru;
}

::-ms-thumb {
    background: steelblue;
}