Select
A styled native <select> with a fully custom
picker in supporting browsers.
In browsers that support appearance: base-select (Chrome
135+), the picker opens as a styled popover matching the rest of the
UI. Older browsers get the original styled native select -- no extra
code needed.
The <button> and
<selectedcontent> children are only used by
supporting browsers; others ignore them and render the native control.
Default
<select>
<button>
<selectedcontent></selectedcontent>
<svg><!-- chevron-down --></svg>
</button>
<option>Apple</option>
<option>Banana</option>
<option>Cherry</option>
<option>Mango</option>
</select>Disabled
<select disabled>
...
</select>With separator
Use an <hr> between options to visually group
choices.
<select>
<button>
<selectedcontent></selectedcontent>
<svg><!-- chevron-down --></svg>
</button>
<option>Apple</option>
<option>Banana</option>
<option>Cherry</option>
<hr />
<option>Other</option>
</select>With groups
Use <optgroup> to group related options under a
section label.
<select>
<button>
<selectedcontent></selectedcontent>
<svg><!-- chevron-down --></svg>
</button>
<optgroup label="Tropical">
<option>Mango</option>
<option>Papaya</option>
<option>Pineapple</option>
</optgroup>
<optgroup label="Stone fruit">
<option>Cherry</option>
<option>Peach</option>
<option>Plum</option>
</optgroup>
</select>