Styling HTML5's input range control with CSS?

css html input slider range
user852974 picture user852974 · Nov 20, 2011 · Viewed 16.9k times · Source

If so, how? I want to make the slider look like this: enter image description here

Which involves changing the color of the draggable dot and the slider bar, as well as changing their sizes. Any help would be appreciated.

Answer

albert picture albert · Nov 20, 2011

you can do it in WebKit for sure. here's a quick example: http://jsfiddle.net/jalbertbowdenii/7Nzgw/3/

pretty sure you can style cross-browser if you're using modernizr, @ least for modern browsers..but i am assuming. you can find more information here: http://davidbcalhoun.com/2011/implementing-iphone-slider-unlock-with-input-type-range

Related questions

Is there any way to change input type="date" format?

I'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Read More
Put icon inside input element in a form

How do I put an icon inside a form's input element? Live version at: Tidal Force theme

Read More
Can I hide the HTML5 number input’s spin box?

Is there a consistent way across browsers to hide the new spin boxes that some browsers (such as Chrome) render for HTML input of type number? I am looking for a CSS or JavaScript method to prevent the up/down …

Read More