demo · v134

Customizable Select

<select> can opt into base-appearance, expose a slottable button and render rich content inside <option>. The picker below is a real <select> — keyboard nav, accessibility tree, and form submission all work — but every option carries a colour swatch.

probing appearance:base-select...

Try it

no submission yet
For comparison, the same control with legacy rendering:

The code

<select>
  <button type="button">
    <selectedcontent></selectedcontent>
  </button>
  <option value="rose">
    <span class="swatch"></span> rose
  </option>
  ...
</select>

<style>
  select, ::picker(select) { appearance: base-select; }
</style>

see also