Customizable select

Finally, a <select> you can fully design without losing accessibility.

In your browser: checking…Reviewed 1 Oct 2026

With appearance: base-select, the select and its dropdown (::picker(select)) accept any styling, and options can hold content: icons, colours, secondary text. <selectedcontent> mirrors the chosen option inside the button, and ::checkmark and ::picker-icon can be restyled.

Chrome and Edge since 135 and Safari since 27 (September 2026). Firefox has it behind a flag since 149, with no date yet. Where unsupported you get a normal select, so you can use it today.

What it is for

Language, country or currency pickers with flags or icons
Colour or material pickers with swatches
Forms matching your design system

Demo

Two real <select> elements: they submit with the form, work with the keyboard and screen readers announce them as usual. Only the CSS changes.

Browser support

Limited availability

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
appearance: base-select	135Chrome: 135	135Edge: 135	149flagFirefox: 149 flag	27Safari: 27	135Chrome: 135	—Firefox: No	27Safari: 27
<selectedcontent>	135Chrome: 135	135Edge: 135	—Firefox: No	27Safari: 27	135Chrome: 135	—Firefox: No	27Safari: 27

Compatibility generated on every deploy from MDN browser-compat-data 8.1.3 (24 Sep 2026) · web-features 3.40.0 · checked by hand: 1 Oct 2026

Minimal code

<!doctype html>
<meta charset="utf-8">
<title>Customizable select · ejemplo mínimo</title>
<style>
  body { font: 16px system-ui; padding: 2rem; }
  /* Activa el modo personalizable en el select y en su desplegable */
  select, ::picker(select) { appearance: base-select; }
  select { padding: 8px 12px; border: 1px solid #999; border-radius: 8px; }
  ::picker(select) { border: 1px solid #999; border-radius: 8px; padding: 4px; }
  option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; }
  option:checked { background: #f3e2d6; }
  option::checkmark { content: '✓'; }
  select:open::picker-icon { rotate: 180deg; }
  .dot { width: 14px; height: 14px; border-radius: 50%; }
</style>
<label for="material">Material</label>
<!-- Sin soporte, es un select normal: las opciones se ven como texto -->
<select id="material">
  <button><selectedcontent></selectedcontent></button>
  <option value="nogal"><span class="dot" style="background:#6b4428"></span> Nogal</option>
  <option value="marmol"><span class="dot" style="background:#e9e4da"></span> Mármol</option>
  <option value="laton"><span class="dot" style="background:#c9a25a"></span> Latón</option>
</select>

Open the example ↗apis-snippets/customizable-select/ · The repositories will be published soon.

What’s new

Keep in mind

The <button> must be the select’s first child.
Some frameworks strip that markup or break server hydration; test it in yours.
It is not in Interop 2026: Firefox has no date.