v142 · dom

Mobile and desktop parity for select element rendering modes

By using the size and multiple attributes, the select element can be rendered as an in-page listbox or a button with a popup. However, these modes are not consistently available across mobile and desktop chrome. Currently, in-page listbox rendering is not available on mobile, and button with popup is not available on desktop when the multiple attribute is pr

concepts

  1. Select Parity

    Slide size and toggle multiple; see the live <select> next to a key showing which rendering mode the spec now mandates across platforms.

  2. Listbox Mode & Stylable Tree

    The bigger reason the parity work landed: it's the prerequisite for appearance: base-select. Default UA rendering next to the opt-in stylable tree, with ::picker(select) targeted by CSS.

  3. Responsive Toolbar

    A real toolbar with three selects across mobile, tablet, and desktop viewports. Toggle size and multiple and watch a matrix mark the cell — same markup, identical rendering everywhere. The old per-platform divergence killed.

  4. Breakpoint Preview

    Resize a live viewport emulator across four breakpoints (320px–1280px) and watch the same <select> markup stay consistent. Toggle size and multiple combinations, see the rendering mode matrix flip, and compare Chrome 142's unified behaviour against the old per-platform divergence.

why it shipped

Without this feature, web developers can't achieve a consistent experience across mobile and desktop, and may expect the select element to render one way due to developing on desktop and be surprised when it is completely different on mobile.

references