Cross-browser CSS for consistent select element styling.
Available on npm:
npm install fg-select-css
If you’re looking for the JS version of the select plugin, check out
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::afteryourself 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:
- A-grade: Uses custom pseudo-element arrow and hides the native arrow using
appearance: none(or a compatible vendor prefixed property).
- 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
- 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.
- 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
- 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.
select-css-compat.css to add B-Grade to:
- Firefox 4 through 34
- Internet Explorer 10 and 11