demo · v142

Listbox Mode & Stylable Tree

The parity work in Chrome 142 was a prerequisite for the bigger Open UI agenda: a fully stylable <select>. With mobile and desktop now agreeing on what "listbox" and "in-page" modes mean, pages can opt into appearance: base-select and target ::picker(select) without forking CSS per platform. Below: default modes (dropdown, listbox, multi) next to the same options rendered via the opt-in base-appearance tree.

default UA rendering

size=1

size=5 (listbox)

multiple

appearance: base-select (Chrome 142+)

same options, ::picker(select) styled to the editorial palette. Pre-141 mobile would ignore these rules.

supports appearance:base-select
—
device pointer type
—

Mobile pre-Chrome 142 forced the native picker even with custom appearance attempts. With parity, the same rules govern both.

relevant CSS

select {
  appearance: base-select;
}
select::picker(select) {
  appearance: base-select;
  background: white;
  border: 2px solid black;
  box-shadow: 4px 4px 0 black;
}
option:checked { background: blue; color: white; }

see also