Home
Products
Grids
Blog
Support
Donate
About
   

Cool select boxes with CSS and jQuery

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.
HTML
The CSS should be fairly obvious, but there's some browser fixes.
CSS
Giving the -webkit-appearance, -moz-appearance and appearance properties a value of none removes the browser's native UI design and allows you to style your own.

The -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 :after pseudo-class.
CSS
The newSelect class displays the select box, while the options class replaces the native UI drop-down list.
jQuery
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