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

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

<input type="range"  name="rangeEl" value="20" min="0" max="150" step="1" />

the css is:

input[type=range] {
   border: 1px solid #4ba8b1;
margin: 0px 0px 5px 5px;
background:-webkit-gradient(linear,center top, center bottom, from(#CFDCDD),to(#DFE9EA),color-stop(50%,#DFE9EA));
float:left;
pointer:cursor;
-webkit-appearance:none;
width:300px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
input[type=range]::-webkit-slider-thumb
{
   -webkit-appearance:none;
   border:1px solid #4ba8b1;
   background-color:#000;
   width:5px;
   height:5px;
}

Now the problem is the slider should contain two color one which is before the thumb and one which is after the thumb. ALso i want to get the original image of that thumb in slider. Is that possible?

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.