v145 · HTML · Forms

Customizable Select Listbox

Chrome 145 extends the customizable <select> element to its in-flow listbox rendering mode. When a <select> uses size greater than 1 or multiple without size="1", it renders in the page rather than as a popup button. With appearance: base-select, Chrome 145 now allows full CSS control over that in-flow presentation. The separate multi-select popup shape, <select multiple size="1">, is not covered by this feature.

concepts

  1. Basic Listbox Demo

    See a <select size="N"> rendered as a fully styled listbox using appearance: base-select. Custom borders, option backgrounds, selected state, and hover highlights applied with standard CSS — no JavaScript wrappers needed.

  2. Popup vs. Listbox Comparison

    Side-by-side view of the same <select> in popup (dropdown) mode versus listbox (in-flow) mode with identical custom styling, showing how appearance: base-select unlocks both rendering modes.

  3. Option Template Lab

    Stuff colour swatches and secondary text inside <option>, then filter the listbox as you type. Demonstrates the supported multiple size>1 and size>1 listbox shapes, and calls out why multiple size="1" is the unsupported multi-select popup path.

  4. Color Picker Select

    A brand color picker built as a <select size="8"> with appearance: base-select. Each option contains a color swatch rendered as HTML. Selecting a color updates a live preview card — all with standard form semantics and zero JavaScript wrappers.

why it shipped

The first wave of customizable <select> work (Chrome 130) gave authors control over the popup presentation — the button that shows the selected value, and the dropdown panel that appears on click. But <select size="5"> and <select multiple> render as an in-flow listbox, not a popup, and that path remained unstyable. Authors who needed a styled multi-select listbox had to build custom ARIA widget replacements from scratch. Chrome 145 closes this in-flow listbox gap; it does not yet cover the multiple size="1" multi-select popup.

opt-in and styling

/* Opt in to base appearance — works for both popup and listbox modes */
select {
  appearance: base-select;
}

/* Style in-flow listbox containers: size > 1 or multiple without size=1 */
select[multiple]:not([size="1"]), select[size]:not([size="1"]) {
  border: 2px solid var(--border-black);
  border-radius: 4px;
  background: var(--bg-paper);
  padding: 4px;
}

/* Style individual options */
option {
  padding: 0.4rem 0.8rem;
  border-radius: 2px;
  color: var(--text-charcoal);
}

option:hover {
  background: var(--bg-stone);
}

/* The selected option */
option:checked {
  background: var(--text-black);
  color: var(--bg-ivory);
}

references