How to Style HTML Input Range

We have just recently added a new generator to CSSPortal.com, Style HTML Input Range. This generator will help you visually design a better input range than the generic one that is styled with your browser.

The generator will turn this input range:

into this with css:

or any other color design you wish to use.

To style the input range, we use the following vendor pseudo selectors.

Firefox:
::-moz-range-track
::-moz-range-thumb

Internet Explorer:
::-ms-thumb
::-ms-track
::-ms-fill-lower
::-ms-fill-upper

Webkit (Chrome, Safari, Opera):
::-webkit-slider-runnable-track
::-webkit-slider-thumb

Although it is possible to apply styles directly to input[type=range], you may run into problems with older browsers that have yet to implement to correct styles. Because of this we recommend using the vendor pseudo selectors to customize the range thumb and track.
You can also use the :focus pseudo class to style the input range when the user has selected the tag.

I hope you enjoy using the HTML Input Range Generator and can come up with some unique and interesting styles to use on you webpage. If you have designed something that you’re proud of and wish to show it off, just contact me with the code generated and I will add the design to the preset designs.

2 Responses to How to Style HTML Input Range

Leave a Reply to bayi perempuan Cancel reply

Your email address will not be published. Required fields are marked *