Let’s go over a few demos using the new customizable <select> feature that may be wild, but also give us a great chance to learn new things in CSS.

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

A hands-on walkthrough of the new customizable <select> feature in Chromium-based browsers, demonstrated through three creative demos: a curved stack of folders, a fanned deck of cards, and a radial emoji picker. The tutorial covers key techniques including the ::picker() pseudo-element for opting into full styling, ::picker-icon and ::checkmark pseudo-elements, the sibling-index() and sibling-count() CSS functions for positional styling, CSS anchor positioning to control dropdown placement, @starting-style for entry transitions, @property for animating custom properties, and CSS trigonometry (cos/sin) for circular layouts. Each demo progressively introduces new CSS capabilities while maintaining accessibility and graceful degradation in non-supporting browsers.

Abusing Customizable Selects

<p>Abuse? Thats the coolest select boxes I’ve ever seen! I’m totally stealing the radial one.</p>
