demo · v134

Rich option content

The planning case that pushed this feature past “custom CSS” was: developers want arbitrary HTML inside an option — avatars, currency flags, two-line user pickers, code editor language switchers — without giving up form submission, keyboard navigation, screen reader semantics, or required-field validation. Open the picker and you’ll see real options with images and meta text, but the form still submits a plain string value.

probing appearance: base-select…
If you don’t see two-line options below, your browser doesn’t support customisable select yet. The fallback is a normal native dropdown — try in Chrome 134+.

User picker (rich options)

No selection yet.

The code

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

<select class="fancy" name="reviewer" required>
  <option value="">Choose…</option>
  <option value="rln">
    <div class="opt-row">
      <img src="…">
      <span>Rachel L. Nabors<br>Web standards · 2d ago</span>
      <span class="opt-flag">L4</span>
    </div>
  </option>
</select>

The submitted form value is still rln — option value wins, the inner DOM is just chrome.

see also