Select menus, like literally the <select> native HTML elements, are notoriously unstyleable. In the last few years, it’s become tenable to style the *outside* of the menus, even with just CSS alone, making them sit nicely in design systems without too much trouble. But you have little to no control over an *open* select menu, that is, the options inside. Those are generally rendered by the operating system, not the browser, and thus CSS isn’t really involved.

The Open UI team has worked on a new select menu that is rendered by the browser, and thus is styleable with CSS. Working with a preview of it in Canary browsers reveals it’s tremendously easy to work with, and thus probably what we’ll all be using soon enough.

See Patrick Brosset’s work here:

The work done by https://t.co/UspedlWhQ2 is very exciting, and so important.

Early experimentation work in Edge makes built-in fully-stylable and accessible <select>s possible, no libraries or custom JS needed.

Check the demo in Edge Canary only: https://t.co/3jJwArKRmR pic.twitter.com/P03t1HXaIt

— Patrick @[email protected] (@patrickbrosset) December 13, 2021