Customizable CSS Select with appearance: base-select
Customizable selects without a JavaScript library
Styling selects used to require JavaScript libraries like Select2 or Choices.js that replace the native element entirely. Now appearance: base-select unlocks full CSS customization of the native select.
/* JS: replace native select with custom DOM */import Choices from 'choices.js';new Choices('#my-select', { searchEnabled: false,});/* Plus ~30 lines of custom CSS for .choices__inner, .choices__list, etc. */select,select ::picker(select) { appearance: base-select;}select option:checked { background: var(--accent);}customizable select Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
Native element
Keep the real select with built-in keyboard navigation, form participation, and accessibility for free.
Top-layer rendering
The dropdown renders in the top layer. No overflow clipping from parent containers.
Zero JS, zero dependencies
Drop the 30 KB library. Style everything with CSS alone: button, list, options, even the selected content.
How it works
Custom-styled selects have been one of the biggest pain points in web development. The native <select> element was essentially un-stylable, so libraries like Select2 and Choices.js replaced it with a fully custom DOM structure. This added weight, broke accessibility, and required constant maintenance.
With appearance: base-select, you opt into the new customizable select mode. The browser provides a minimal, fully stylable foundation. You can style the button, the dropdown (::picker(select)), individual options, and even use the <selectedcontent> element to reflect the selected option's HTML in the button. Rich content like images and icons work inside options natively.