Geek Answers Handbook

Internet Explorer 11 css browser style

I would like to style the range of the slider using css, but all the examples I found are not developed in Internet Explorer 11, where the slider looks like this:

enter image description here

Do you know how to style it, and why only 11 do not show the style when defining it?

+8
source share
2 answers

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

  • ::-ms-fill-lower controls the slider track styles in front of the large slider

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

  • ::-ms-thumb - for the largest slider.

  • ::-ms-tooltip - controls slider ::-ms-tooltip style

  • ::-ms-track styles individual slider tracks.

Fiddle example

 ::-ms-fill-lower { background: coral; } ::-ms-fill-upper { background: peru; } ::-ms-thumb { background: steelblue; }
+12
source

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

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

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

0
source

More articles:


All Articles