The select element is notoriously difficult to style with CSS. But with a few CSS hacks, and some jQuery for a complete makeover, we can have hip and attractive select boxes.
A Select Box styled with just CSS
Below is a select box styled with only CSS. It's the easiest way of changing the element's appearance, but there's oddities, and the limitations are well-known.
Everything is pretty much standard, but with a wrapper and a
div for displaying a pointer character.
The CSS should be fairly obvious, but there's some browser fixes.
properties a value of
removes the browser's native UI design and allows you to style your own.
-moz-focusring pseudo-class values removes the dotted focus ring in Firefox.
Works with IE11, Edge 16+, Chrome 49+, Firefox 59+, Safari 11.1+, iOS Safari 10.3+, Chrome for Android 67+ and Samsung Internet 4+.
A Select Box styled with CSS and jQuery
A select box styled with CSS and pimped with some jQuery. With this method you can change every part of the element's appearance.
The CSS includes another method of displaying a pointer, using the
newSelect class displays the select box, while the
options class replaces the native UI drop-down list.
Works with IE11, Edge 16+, Chrome 49+, Firefox 59+, Safari 11.1+, iOS Safari 10.3+, Chrome for Android 67+ and Samsung Internet 4+. Requires jQuery 3+.
Credit to the author of jQuery Custom Select Box upon which this code is based.
Latest & featured