Stylable select is here!

For years, web developers and designers have grappled with the elusive beast that is the HTML <select> element. It’s a foundational aspect of the web, yet one that has caused countless headaches due to its stubborn resistance to style it, insert more complex content (even images), and extensibility. But I'm thrilled to share that, thanks to years of dedicated effort across the community, the tide is finally turning. A truly stylable and extensible select is no longer a distant dream – it's here!

The Long and Winding Road: A History of Styling Frustration

Cast your mind back to 2019, the web development landscape was buzzing with innovation, yet the humble <select> remained a relic. Back then, I conducted a survey that really highlighted the pain points. The top frustrations? Hands down, it was the styling limitations. Developers and designers were tearing their hair out trying to make selects look consistent across browsers and match their brand's aesthetic. Beyond that, creating a good user experience for searching within long lists and inserting non-text content into options was a constant battle.

The core problem was deeply rooted in how browsers rendered the select. They limited styling significantly, making it incredibly difficult to achieve a custom look without resorting to complex JavaScript workarounds that often sacrificed accessibility and performance. It was a clear call to action: we needed improvements to this fundamental control to enhance both the developer and user experience. In that same year; Nicole Sullivan and I gave a talk at the Chrome Dev Summit outlining these gaps and our plans to try and address it and formally announcing the Open UI Community Group.

How It all works and examples; Una's talk at Google I/O

So, how did we get from that state of frustration to today's reality? A significant part of the journey involves groundbreaking work on new web UI primitives. As Una highlighted in her "What's new in web UI" talk at Google I/O, standards bodies and browser implementers have focused on simplifying notoriously tricky UI patterns.

Features like the Popover API and Anchor Positioning are game-changers. The Popover API, now widely available, makes it incredibly easy to create overlay elements like dropdowns, handling all the complex lifecycle, focus, and dismiss behaviors natively. No more wrestling with JavaScript for basic dropdown functionality! Anchor Positioning, which is expected to be in all browsers by the end of 2025, allows you to declaratively tether elements together, automatically handling edge collisions – a dream for precisely positioning popovers relative to their triggers.

Crucially, native styling for select elements has reached stable release in Chromium 134. This means extensive control over styling dropdowns, options, and even check marks. With new properties like appearance: base-select and the ::picker() pseudo-element, developers finally have the CSS hooks they've craved for years. This isn't just about making things look pretty; it's about making them truly part of your design system, accessible, and performant, all without the heavy JavaScript tax.

Open UI's Impact: Fostering Primitives and Unlocking Possibilities

The progress we've seen with select is a testament to the collaborative spirit within the web community, particularly through the Open UI community group. Open UI, working closely with the CSS Working Group (CSSWG) and the Web Hypertext Application Technology Working Group (WHATWG), has been instrumental in fostering improvements in core primitives. This journey did not go as quickly as I had hoped but I'll save that for another post. Open UI is now incubating expanded invoker commands which is a generalized solution akin to popover of binding interactive functionality declaratively.

The group is not stopping at select; we're actively looking into the Enhanced Range Input in parrallel with the great work happening on styling of form control styling in the CSSWG that will enable the extensibility and scenarios that styling alone will not enable. Also a new menu elements of menulist, menubar, and menuitem elements due to concerns of popover being used for menu scenarios. There is a lot more amazing work happening in the group and I'm thrilled at the communities growth and role in pushing the web forward.

It's been a journey, thank you to everyone involed

The journey to a stylable select has been a long one, marked by numerous iterations, a lot of feedback, compromises on the final shape but not only is it finally here but the platform has also gained awesome primitives that support UI solutions beyond select. This is an exciting time for web UI development. One of the key things that I am excited about is that we now have an understanding of how we should land these in the platform. I am excited to see what everyone builds with these and I can't wait to close out the UI toolkit built in to the platform. With these new tools, developers can build more robust, accessible, and beautiful form controls with greater ease than ever before. It's not just about making select pretty; it's about making the web a better place for everyone.

Special thanks to Mason Freed and Una Kravets for their review :)