how to achive background color in html5 input[type=range]?

Question

Ineed to color the htmnl5 input[type=range] controls. Since works only in webkit i designed it as my wish from many web sources.here is what i designed for my slider(input[type=

Answer 1

It's not impossible to style form elements, but you have to override a lot of browser default styles, and they're all different, and they all take different prefixed rules, and even then some things still won't work perfectly. But it's not impossible.

In this particular case, you can indeed set the background color of the input[type='range'] in Webkit only using background or background-image on:

input[type='range'] {}

You can also set the style of the slider thumb with:

input[type='range']::-webkit-slider-thumb

You cannot, AFAIK, have one color before the thumb and one color after, with the default HTML5 implementation. For that, you'll need to use one of the many more customized javascript range sliders like JQuery UI's.