Customizable <select>
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The <selectedcontent> HTML is used inside a <select> element to display the contents of its currently selected <option> within its first child <button>. This enables you to style all parts of a <select> element, referred to as "customizable selects".
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.