You can style <select>'s now (in Chrome)
One of the most exciting new web features finally landed on Chromium based browsers, styleable select dropdowns!
It is 2025 and I can’t believe that I’m writing this, but we finally can style the default select dropdown through HTML and CSS only. Introduced 30 years ago as part of the HTML 2.0 specification, it is finally (almost) up to modern interface standards with the addition of <selectedcontent> and anchor-positioning.
Why did it take so long?
Standards, and the web moves a lot faster than it did when this element was first introduced in the 90s. The default select element has always been a key component for forms. It worked cross-platform and was incredibly easy to use, just like input elements. But as time went on, more complex interfaces came up. Suddenly you didn’t have a select asking you for your favorite out of 5 ice cream flavors, they were used to select one of hundreds of websites, select specific users with their respective avatars or even added a search/filter functionality right in the dropdown content.
As time went on and it became clear that more feature-rich selection is the standard, instead of relying on every dev rolling their own custom dropdown (or using one of hundreds of available libraries) and expecting everyone to understand every single aspect of such an element, especially in regards to accessibility, WhatWG and the OpenUI charter came together to work on new specifications, making it easier to customize both the clickable area of the selected content and the content of the dropdown itself.
So, what can you do with it?
Almost everything that previously required you to craft your very own select dropdown. The new select properties allow you to use multiple labels, full CSS support within each option, full customization of the clickable interface opening the dropdown and even allows you to add images, elements or basically anything else within the select dropdown. The one constraint it currently does not seem to tackle are input elements within the dropdown (ie: a search above the options).
A quick demo
Browser support
Most features used in this example are not yet compatible with most browsers. In fact, only Google currently supports styleable selects.
appearence: base-select
| Chrome / Edge | Firefox | Safari |
|---|---|---|
| 134 (March 2025) | No support | No support |
Last update: June 17th, 2025
Full OpenUI specification
| Chrome / Edge | Firefox | Safari |
|---|---|---|
| Partially / Through experimental flag | No support | No support |
Last update: June 17th, 2025