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??
10 Answers
You can in Webkit, through the -webkit-slider-thumb pseudo-element: http://jsfiddle.net/leaverou/BNm8j/
input[type=range] {
-webkit-appearance: none;
background-color: silver;
width: 200px;
height:20px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #666;
opacity: 0.5;
width: 10px;
height: 26px;
}<input type="range" min="0" max="100" />Although the others are right about input type="range" not being the right element for the job.
You should use the <progress> element and for browsers that don't support it, this polyfill: http://lea.verou.me/polyfills/progress/
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.
Related