select-css

Cross-browser CSS for consistent select element styling.

Demo page: http://filamentgroup.github.io/select-css/demo/

Download: select-css.css and select-css-compat.css

Available on npm: npm install fg-select-css

If you’re looking for the JS version of the select plugin, check out select.

Usage

Include some or all of the following files, picking and choosing based on your project needs:

• select-css.css: main component code (required)
• select-css-arrow.css: adds a CSS triangle arrow to the wrapper element. Don’t include this file and style .custom-select::after yourself to customize your own arrow. Could use a background image bitmap, SVG, icon font content, etc.
• select-css-compat.css: expanded B-Grade browser support (see more info below).
• select-css-theme.css: include the Filament Group theme with custom focus styling.

How it works

This styles a native select consistently cross-platform with only minimal CSS. The native select is then styled so it is essentially invisible (no appearance, border, bg) leaving only the select's text visible. There is a wrapper around the select that has the majority of the button styles (gradient, shadow, border, etc.).

There are three different CSS-only grades used in this select plugin:

1. A-grade: Uses custom pseudo-element arrow and hides the native arrow using appearance: none (or a compatible vendor prefixed property).
2. B-grade: Uses a custom pseudo-element arrow but hides the native arrow by making the native select wider than the container (usually using calc() to keep 100% width but add a fixed amount) and hiding the arrow using overflow: hidden.
3. C-grade: Uses the native select and not the custom arrow.

Both A-Grade and B-grade visually look the same:

C-Grade appearance varies by operating system and web browser.

Important: The plugin should never show both the custom arrow and the native arrow at the same time. Any browser that renders both will be considered to be a visual bug and we’d love to have you file an issue on it.

Browser Support

A-Grade using select-css.css

• MS Edge 12 and 13
• Firefox 35 through 44
• Chrome 28 through 48
• Opera 15 through 35
• Safari 9
• Yandex 14.12
• iOS 9
• Android 4.3 through 5.1

C-Grade using select-css.css

• Internet Explorer 6 through 11
• Firefox 3.6 through 34
• Chrome 15 through 27
• Opera 10.6 through 12.16
• Safari 4 through 8
• iOS 3 through 8
• Windows Phone 7.5 through 8.1
• Android 2.3, 4.2
• Blackberry 5

Most of the C-Grade support minimums are as comprehensive as Browserstack allows.

Add select-css-compat.css to add B-Grade to:

• Firefox 4 through 34
• Internet Explorer 10 and 11

For Posterity:

• v9: February 26, 2016
• v8: September 18, 2015