v145 · HTML · Popup vs. Listbox

Popup vs. Listbox Comparison

The <select> element has two rendering modes: popup (a collapsed button that opens a dropdown panel) and listbox (an in-flow list of options). Both can now be customised with appearance: base-select — popup via ::picker(select), listbox directly on the element. Identical CSS option styles apply to both.

Chrome 130+ required for popup customisation; Chrome 145+ required for listbox customisation. On older browsers the selects still work — they just render with the OS appearance.

live comparison

Popup mode (no size attribute)

Click to open the dropdown. Styles applied via ::picker(select).

Listbox mode (size="6")

Rendered in-flow. Styles applied directly to select.

rendering mode differences

Characteristic Popup mode Listbox mode
Activated by Default, or size="1" size > 1 or multiple
Layout impact Occupies only button height Occupies full expanded height in flow
Always visible No — options in a floating popup Yes — options always rendered
Multi-select No Yes (with multiple)
Style popup container ::picker(select) (Chrome 130+) Style select directly (Chrome 145+)
Style options option { } option { } (same)
Chrome baseline Chrome 130 Chrome 145 (new)

complete CSS

/* Single opt-in applies to BOTH modes */
select {
  appearance: base-select;
}

/* ------ Popup mode ------ */

/* The collapsed button */
select:not([size]):not([multiple]) {
  padding: 0.4rem 0.6rem;
  border: 2px solid var(--border-black);
  border-radius: 3px;
  background: var(--bg-stone);
}

/* The floating dropdown panel */
select::picker(select) {
  background: var(--bg-paper);
  border: 2px solid var(--border-black);
  border-radius: 3px;
  padding: 0.25rem;
}

/* ------ Listbox mode (NEW in Chrome 145) ------ */

select[size], select[multiple] {
  border: 2px solid var(--border-black);
  border-radius: 3px;
  background: var(--bg-stone);
  padding: 0.25rem;
  height: 10rem;
}

/* ------ Options (shared between both modes) ------ */

option {
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
}

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

option:checked {
  background: var(--text-black);
  color: var(--bg-ivory);
  font-weight: 600;
}

see also