Say goodbye to ugly <select>.
CSS now gives you full control.
For years, <select> elements have been frustrating to style.
Often needing JavaScript or UI libraries.
Now, modern browsers bring full customization to native dropdowns.
What’s New?
Chrome introduces new CSS properties for better <select> styling.
No more browser inconsistencies!
-
Total Style Control: Customize backgrounds, borders, and padding without hacks.
-
Custom Dropdowns: Control width, height, and animations. No more default system styles.
-
Multi-Column & Scrollable Options: Create advanced layouts, scrolling areas, and better positioning.
Why It Matters?
- Dropdowns match your design system without breaking accessibility.
- Native UI is lighter and quicker.
- No need for extra libraries nor JavaScript.
Rolling out in Chrome 135+, with other browsers likely to follow. Start experimenting today!
This will finally end painful <select> styling 🔥
Checkout the codepen: https://codepen.io/theosoti/pen/VYwqEvP
Custom-styled native selects should keep native behavior and clear affordances. Test focus rings, long option labels, and high-contrast states to ensure visual customization does not reduce usability.
Styled native selects should retain clear affordances and keyboard behavior. Validate long options, focus rings, and contrast so visual customization does not harm usability.
For production forms, test keyboard order, disabled states, and validation messages with realistic labels. Native behavior should remain intact while visual polish improves.
Want to build modern interfaces with less JavaScript?
I wrote a guide about building modern UI with HTML and CSS first. It covers practical patterns you can use before reaching for JavaScript.
Learn more