GoKawiilUna Kravets
Styling form controls like the <select> element has been reported as a top developer pain point for years, and we've been working on a solution. While this work is complex and has taken a long time to get right, we're getting very close to landing this feature. A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype for you to test out from Chrome Canary 130.
Try it out and give us your feedback
Check that your install of Chrome Canary is updated to version 130, and that you have the experimental web platform features flag on. You can turn this flag on by going to chrome://flags in your address bar and turning on #experimental-web-platform-features. Then, you should be able to see the Codepen demos in this post. Alternatively, you can check out this Codepen collection to view them all in one place.
Use this form to provide feedback on the feature. It will only take three minutes to complete!
Note: For this first round of feedback, we understand that the accessibility implementation is not yet complete in Chrome Canary (though there is an initial implementation already landed for you to try out). A team that includes authors, browser implementers and assistive technology experts is working hard to ensure great accessibility for valid author patterns. We'd love to hear your feedback on the initial implementation.
Let's dive into the features of the customizable select API, which builds on the existing HTML select tag.
Opting-in to the new <select>
To opt-in to the new behavior use the CSS appearance property on both the in-page select button and also on the select picker. To opt-in, set appearance: base-select on your <select> element and on the ::picker(select) .
::picker(select) is a new user-agent provided pseudo-element that only applies to <select> elements which have been opted into the new behavior using appearance: base-select . This picker pseudo-element is the popover that is triggered by the base select button. You can opt-in both as shown in the following code:
... continue reading