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

Question

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

Answer 1

jQuery Tools provides a plug-in that creates stylable elements from a range input, and what's more, makes it still work as a slider in older browsers that don't support input[type=range].

Allows you to style:

• the handle
• the slider
• optional progress fill
• value output field

I've used it many times and it's a great tool.

WARNING: doesn't work on touch devices. I don't have as much experience with it, but you could try the jQuery mobile slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

http://jquerytools.github.io/demos/rangeinput/index.html

Answer 2

EDIT: nowadays all major browser support both

• <progress>

• input[type='range']

Hence you should use one of these two, as explained in other answers, and this should not be the accepted answer anymore.

---

The <input type="range"> is pretty new and you are already attempting to customize it with CSS. :)

I wouldn't try that for two reasons:

1. there might be huge compatibility issues now and for the next few (or many) years. Think that in nowadays a form control like <select> (available since the web started) is still problematic to be customized with CSS in a cross browser way. For instance if you set a padding for the select boxes, many browser (IE7, OPERA9, CHROME5, SAFARI4) will totally ignore the padding. It works only IE8 and on FF 3.6. (all tests done with HTML5 DOCTYPE so in standard mode).

2. The <input type="range"> has been created to show a slider NOT a progress bar, attempting to cheat on it with CSS in order to transform a slider into progress bar it sounds bizarre. Like trying to use CSS to change a <textarea> into a table, but why don't you simply use a <table> to render tables?!

To show a progress bar in HTML5 you should follow the suggestion given by marcgg in his answer. Since no browser is currently rendereing it you could use a simple div with a p inside like this:

<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
   <p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;">&nbsp;</p>
</div>

Then simply update the style.width of inner P element in percent like:

width: 75%

FYI: if you want to do that in simple JS here is the code:

document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';

Answer 3

You can edit the CSS of the range input, using input[type="range"]::-webkit-slider-thumb and input[type="range"].

Here is the example of it,

http://webstutorial.com/range-input-slider-html5-css3/html-5

I know this is already answered but just sharing it.

Answer 4

This is an example:

input[type='range'] {
	-webkit-appearance: none;
	border-radius: 5px;
	box-shadow: inset 0 0 5px #333;
	background-color: #999;
	height: 10px;
	vertical-align: middle;
}
input[type='range']::-moz-range-track {
	-moz-appearance: none;
	border-radius: 5px;
	box-shadow: inset 0 0 5px #333;
	background-color: #999;
	height: 10px;
}
input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	border-radius: 20px;
	background-color: #FFF;
	box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
	border: 1px solid #999;
	height: 20px;
	width: 20px;
}
input[type='range']::-moz-range-thumb {
	-moz-appearance: none;
	border-radius: 20px;
	background-color: #FFF;
	box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
	border: 1px solid #999;
	height: 20px;
	width: 20px;
}

<input type="range">