Internet Explorer 11 css style of range slider

问题

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:

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

回答1:

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

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

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

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

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

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

An example fiddle

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

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

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

回答2:

In addition to the 5 pseudo-elements mentioned by @adrift, there are 2 more related to ticks. So to recap:

1. ::-ms-fill-lower controls styling of the sliders track before the slider thumb
2. ::-ms-fill-upper same as above, but after the thumb
3. ::-ms-thumb the slider thumb itself.
4. ::-ms-tooltip controls styling of the tooltip of a slider
5. ::-ms-track styles the sliders individual tracks
6. ::-ms-ticks-before styles tick marks that appear before the track
7. ::-ms-ticks-after styles tick marks that appear after the track

Note that you can have 3 different sets of ticks (!): the track has its own set. Use color: transparent to hide.

回答3:

There is a great article about this on medium: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

If you already have a build process running, I recommend installing postcss-input-range which handles all those prefixes for you.

回答4:

To get these looking as close as possible, I combined some of the answers above. The only "extra" is that IE has a track fill "upper" and "lower" not available in Fox, Safari, Chrome, and 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;
    }

Here's the range itself -- note there are two bootstrap classes to remove padding and set width --

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

来源：https://stackoverflow.com/questions/22181289/internet-explorer-11-css-style-of-range-slider