Question

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

enter image description here

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

Answer 1

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

::-ms-fill-lower控制滑块之前滑块轨道的样式
::-ms-fill-upper与上述相同，但在拇指
::-ms-thumb - 对于滑块拇指本身。
::-ms-tooltip - 控制滑块工具提示的样式
::-ms-track为滑块设置各个曲目的样式。

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

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

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

Answer 2

为了让这些看起来尽可能接近，我结合了上面的一些答案。唯一的“额外”是 IE 具有 Fox、Safari、Chrome 和 Edge 中没有的轨道填充“上”和“下”。

.slider {
        /* Chrome, Edge */
        -webkit-appearance: none;
    }

    .slider:focus {
        /* Eliminates focus on Chrome, Edge */
        outline: none;
    }

    .slider::-webkit-slider-runnable-track {
        /* Chrome, Edge */
        background: rgb(239, 239, 239);
        border: 1px solid rgb(178, 178, 178);
        border-radius: 25px;
        cursor: pointer;
        height: 8px;
    }

    .slider::-webkit-slider-thumb {
        /* Chrome, Edge thumb */
        -webkit-appearance: none;
        background: rgb(7, 114, 251);
        border: 0px;
        border-radius: 16px;
        cursor: pointer;
        height: 16px;
        margin-top: -5px;
        width: 16px;
    }

    .slider::-moz-range-track {
        /* FF Range track */
        background: rgb(239, 239, 239);
        border: 1px solid rgb(178, 178, 178);
        border-radius: 25px;
        cursor: pointer;
        height: 8px;
    }

    .slider::-moz-range-thumb {
        /* FF Range thumb */
        background: rgb(7, 114, 251);
        border: 0px;
        border-radius: 16px;
        cursor: pointer;
        height: 16px;
        width: 16px;
    }

    .slider::-ms-track {
        /* IE Range track */
        background: transparent;
        border-color: transparent;
        border-width: 5px 0; /* allows taller thumb */
        color: transparent;
        height: 8px;
    }

    .slider::-ms-thumb {
        /* Thumb */
        background: rgb(7, 114, 251);
        border: 0px;
        border-radius: 16px;
        height: 16px;
        width: 16px;
    }

    .slider::-ms-fill-lower {
        /* IE Range lower fill */
        background: rgb(7, 114, 251);
        border: 1px solid rgb(62, 116, 184);
        border-radius: 50px;
    }

    .slider::-ms-fill-upper {
        /* IE Range upper fill */
        background: rgb(239, 239, 239);
        border: 1px solid rgb(178, 178, 178);
        border-radius: 50px;
    }

    .slider::-ms-tooltip {
        /* IE Range upper fill */
        display:none;
    }

这是范围本身 -- 请注意，有两个引导程序类可以删除填充和设置宽度 --

<input type="range" min="1" max="100" value="50" class="slider p-0 w-100" />

Answer 3

除了 @adrift 提到的5个伪元素外，还有2个与刻度相关的元素。回顾一下：

::-ms-fill-lower控制滑动条在滑动条之前的样式
::-ms-fill-upper与上述相同，但在拇指之后
::-ms-thumb滑块本身。
::-ms-tooltip控制滑块工具提示的样式
::-ms-track为滑块的各个轨道设置样式
::-ms-ticks-before设置出现在曲目之前的刻度线的样式
::-ms-ticks-after设置曲目后出现的刻度线的样式

请注意，您可以使用3组不同的滴答声（！）：轨道具有自己的一组滴答声。使用color: transparent隐藏。

Answer 4

在媒体上有一篇很棒的文章：https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

如果您已经在运行构建过程，建议您安装postcss-input-range来为您处理所有这些前缀。

Internet Explorer 11 css样式的范围滑块

4 个答案: