Styling Cross-Browser Compatible Range Inputs with CSS
Daniel Stern
on
Nov 5, 2014
(Updated on Jun 2, 2020)
Take the pain out of building site search with the Algolia hosted API. Start free now!
Styling for range inputs has improved dramatically since the release of IE 10. It is now possible to generate cross-browser compatible range inputs (sliders) using only CSS. In this tutorial, we will take a basic range input (<input type=”range”>):
Screenshot of a range input, Mac Chrome 38
And turn it into this:
Range input with completely custom styles.
In order to simplify the process of generating cross-compatible styles, LESS style sheets have been included. CSS is also available.
Applying base CSS styles
Several styles need to be applied to range inputs in all browsers to override their basic appearance.
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
[...]