v145 · HTML · Option Template Lab

Option template lab

Drop richer markup inside <option> — colour swatches, icons, secondary text, two-line layouts — and watch a real appearance: base-select listbox handle them as the user types. This lab is scoped to the Chrome 145 listbox feature, not the separate multi-select popup shape.

ChromeStatus scope. Chrome 145 covers in-flow listbox rendering for <select multiple> and <select size> with appearance: base-select. It explicitly does not cover the multi-select popup, which is the <select multiple size="1"> shape.

rendering mode probe

CSS opt-in

Checking appearance: base-select…

current shape

Multiple listbox: multiple size="7"

selected values

0 selected

filter as you type

Supported path: <select multiple size="7"> renders in-flow and is covered by the Chrome 145 customizable select listbox feature.

customizable listbox

selection

(none selected)

In multi-select listbox mode, hold Ctrl/Cmd to multi-select. In single-select listbox mode, one option is submitted. The custom markup persists; the submitted value remains the value attribute.

code

<!-- Chrome 145 customizable select listbox: in-flow listbox shapes only. -->
<select id="palette" multiple size="7" style="appearance: base-select">
  <option value="emerald">
    <span class="swatch" style="background:var(--accent-emerald)"></span>
    Emerald <span class="meta">— #2a8050</span>
  </option>
</select>

<!-- Not covered by this Chrome 145 feature:
     <select multiple size="1"> creates the multi-select popup shape. -->