Internet Explorer 11 CSS样式滑块 [英] Internet Explorer 11 css style of range slider

问题描述

我想使用CSS为范围滑块设置样式，但是我发现的所有示例均未在Internet Explorer 11中设置样式，其中滑块看起来像这样:

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:

您知道如何设置样式，为什么只有IE 11在定义时不显示样式吗?

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

推荐答案

IE11为您提供了一些与 range 输入有关的伪元素，您可以阅读有关

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

1. ::-ms-fill-lower 控制滑块拇指之前的滑块轨道的样式

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

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

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

::-ms-thumb -滑动滑块本身.

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

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

::-ms-track 设置滑块各个轨道的样式.

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

示例小提琴

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

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

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

这篇关于Internet Explorer 11 CSS样式滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！