The <select> element can now be customized with CSS

a year ago

Chrome 135 introduces a standardized and CSS styleable `<select>` element.
New CSS property `appearance: base-select` enables configurable and styleable states for `<select>` elements.
`base-select` unlocks features like HTML parser changes, new internal parts, and top-layer options display.
`base-select` loses some traditional behaviors like rendering outside the browser pane and triggering mobile OS components.
`<select>` elements can now include rich HTML content like SVGs and images in `<option>` tags.
Risk of breaking existing websites is mitigated by a Finch experiment in Chrome.
JavaScript interfaces for `<select>` remain unchanged, but testing is advised for rich HTML content.
Chrome leads implementation, but other browsers are involved in the specifications for future 'base' elements.

Hasty Briefsbeta