css - How to style <input type='range' /> in IE10 -

i want style <input type='range' /> element in ie10.

by default, ie 10 style element this:

i want customize bit, say, changing color blue red, grey black, little bars yellow, little black scrubber white. tried overwriting background-color property , color property in css. didn't work.

any ideas?

there number of pseudo elements can use style range controls in ie10.

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

will colour part after thumb. style before thumb use:

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

see example http://jsfiddle.net/k8wyc/4/

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

the styles asking can achieved in following fiddle: http://jsfiddle.net/k8wyc/8/