How to customize the HTML5 input range type looks using CSS?

css html progress-bar input-type-range
ptamzz picture ptamzz · Aug 24, 2010 · Viewed 98.3k times · Source

I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I've tried applying some common CSS attributes using CSS class but it seems that they are not working.

Can any one direct me how to customize it??

Answer

Eyal picture Eyal · Jul 12, 2011 
input[type='range'] {
    -webkit-appearance: none !important;
    background:red;
    height:7px;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:blue;
    height:10px;
    width:10px;
}

Related questions

CSS Progress Circle

I have searched this website to find progress bars, but the ones I have been able to found show animated circles that go to the full 100%. I would like it to stop at certain percentages like in the screenshot below. …

Read More
Progress Bar with HTML and CSS

I want to create a progress bar like in the below image: I have no idea about creating this. Should I use HTML5 techniques? Would you please give me some help about creating this progress bar?

Read More
How to make a progress bar

How would one go about making a progress bar in html/css/javascript. I don't really want to use Flash. Something along the lines of what can be found here: http://dustincurtis.com/about.html All I really want is …

Read More