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.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!