The <select> element can now be customized with CSS

Summary

Published: March 24, 2025 From Chrome 135, web developers and designers can finally unite on an accessible, standardized and CSS styleable <select> element on the web. This has been many years in the making, many hours of engineering and collaborative specification work, and the result is an incredibly rich and powerful component that won't break in older browsers. Here's a video of customized selects using these new features: Featuring demos by Una, Brecht, and Adam. If you've been following along closely, you'll notice a few spec names and features have changed since Una's request for community feedback. Luckily, if you worked from that post and are interested in what's changed, Una's also got you covered. Meet appearance: base-select A new CSS property appearance: base-select that puts the <select> element into a new, configurable and styleable state to be commonly referred to as "base" styles: .custom-select { &, &::picker(select) { appearance: base-select; } } Using base-select unlocks a number of new features and behaviors: Using base-select loses a number of features and behaviors: The <select> doesn't render outside the browser pane. It doesn't trigger built-in mobile operating system components. The <select> stops taking the width of the longest <option>. A <select> can now include rich HTML content Before you could customize a <select>, if you put things like an image or SVG into the <option> element, the browser would ignore them. Consider the following HTML, the browser would read it as you authored it: <select class="custom-select"> <option> <svg aria-hidden>…</svg> <span>HTML</span> </option> <option> <svg aria-hidden>…</svg> <span>CSS</span> </option> <option> <svg aria-hidden>…</svg> <span>JavaScript</span> </option> <option> <svg aria-hidden>…</svg> <span>WASM</span> </option> </select> However the used DOM wouldn't include the <svg>: <select class="custom-select"> <option> <span>HTML</span> </option> <option> <span>CSS</span> </option> <option> <sp...