12

I want to style the <input type='range' /> element in IE10.

By default, IE 10 style the element like this: enter image description here

I want to customize it a bit, say, changing the color blue to red, grey to black, the little bars to yellow, the little black scrubber to white. I tried overwriting the background-color property and the color property in CSS. But it didn't work.

Any ideas?

Antony
  • 14,900
  • 10
  • 46
  • 74
louis.luo
  • 2,921
  • 4
  • 28
  • 46
  • 1
    Have you seen this question? - http://stackoverflow.com/questions/3556157/how-to-customize-the-html5-input-range-type-looks-using-css – dsgriffin May 02 '13 at 23:39

3 Answers3

14

You can use the Microsoft CSS pseudo elements:

  • ::-ms-fill-lower
  • ::-ms-fill-upper
  • ::-ms-thumb
  • ::-ms-ticks-before
  • ::-ms-ticks-after
  • ::-ms-ticks
  • ::-ms-tooltip

Here the full Microsoft pseudo list...

IE10

Here is a page with styled IE10 range controls (Open with IE10)

WebKit

WebKit shadow DOM

Other browsers

How to style range control for multiple browsers

A Sliding Nightmare

Jo VdB
  • 2,016
  • 18
  • 16
13

There are a number of pseudo elements you can use to style range controls in IE10.

input[type="range"]::-ms-fill-upper {
    background-color: green;
}

Will colour the part after the thumb. To style before the thumb use:

 input[type="range"]::-ms-fill-lower {
    background-color: lime green;
}

See for example http://jsfiddle.net/K8WyC/4/

To style the thumb you can use ::-ms-thumb, while the tick marks can be styled with ::-ms-ticks-before, ::-ms-ticks-after, or ::-ms-track (the latter styles both sides). You can find out more about the various pseudo-elements for controls at http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx

The styles you are asking for can be achieved like in the following fiddle: http://jsfiddle.net/K8WyC/8/

David Storey
  • 29,166
  • 6
  • 50
  • 60
0

in the previous answer,

::-ms-ticks

should read

::-ms-track

(which is just the ordinary track). The tick color is set by

::-ms-track {color:red;}

The tick height is the track's height, and the width cannot be set. Ticks are suppressed, as is well known, with

 ::-ms-track {color:transparent;}

The pseudo-elements

::-ms-ticks-before,
::-ms-ticks-after {
display:block; (or inline-block)
color:red;
height:10px;
}

create additional ticks above and below the track. One can set their colors and their heights. The tick widths cannot be set. display seems required.

Internet Explorer since IE10 does have default vertical padding. Top padding is 17px, bottom padding is 32px. This makes for a heigh slider by default. Therefore

padding:0px;

may be applied. (See https://connect.microsoft.com/IE/feedback/details/792971/input-type-range-has-vertical-padding-by-default .)

(As I cannot yet comment, I post like this).

Peter
  • 67
  • 5