Customizable <select>
The <select> element's appearance, including the button, selected option, picker dropdown, and options, can be customized using CSS. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The <select> element's appearance, including the button, selected option, picker dropdown, and options, can be customized using CSS. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
<selectedcontent> Experimental | 135 | 135 | | | 135 | |
| CSS property | ||||||
base-select | 135 | 135 | | Preview | 135 | |
| Other | ||||||
css.selectors.checkmark Experimental `::checkmark` | 133 | 133 | | | 133 | |
| `::picker()` | 135 | 135 | | Preview | 135 | |
| `::picker-icon` | 133 | 133 | | Preview | 133 | |
Syntax
<style>
select, ::picker(select) {
appearance: base-select;
}
</style>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>Live demo
Styled select shell
Use a normal select control as the semantic base while styling its outer shell.
Option groups
Show richer grouping and labels while keeping the native selection behavior.
Customizable-select note
Summarize the progressive-enhancement mindset for upcoming select customization features.
Use cases
Improve form input
Use Customizable <select> to make data entry more efficient, guided, or predictable inside real forms.
Reduce friction
Apply Customizable <select> when the browser can help users complete a task with fewer mistakes or less repetitive work.
Cautions
- Test Customizable <select> in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Keep labels, instructions, validation, and keyboard behavior clear so the enhancement helps rather than surprises users.
Related links
Powered by web-features