Advanced UI Patterns with the New Customizable Select API

Abusing Customizable Selects

Chromium browsers have introduced the appearance: base-select property to enable full CSS customization of the element and its internal picker. This update relaxes the HTML parser to allow complex nested elements like spans and divs within option tags. Why This Matters For decades, the select element was a black box for developers, offering minimal styling options and forcing the use of heavy, inaccessible JavaScript-based alternatives. The new API provides a technical path to achieve highly visual, non-standard UI components while maintaining the native browser’s accessibility tree and keyboard navigation. This shift bridges the gap between high-fidelity design requirements and the performance benefits of native browser implementations. Key Insights The ::picker(select) pseudo-element allows developers to override browser-default styles for the dropdown container, including background and overflow properties. The sibling-index() and sibling-count() CSS functions enable dynamic styling based on an element’s position relative to its siblings without JavaScript. The @starting-style at-rule is required to trigger CSS transitions when the select dropdown initially appears in the DOM to avoid abrupt state changes. Customizing the select button requires the ::picker-icon pseudo-element to hide or replace the default browser arrow icon for custom branding. The default behavior can be overridden by providing a custom button inside the select to prevent automatic mirroring of the selected text. Working Examples Opting into full styling capabilities for the select element and its dropdown. select, ::picker(select) { appearance: base-select; } Using sibling-index() to create a curved stack of options. option { --rotation-offset: -4deg; rotate: calc(sibling-index() * var(--rotation-offset)); transform-origin: right calc(sibling-index() * -1.5rem); } Centering the dropdown picker over the anchor button using CSS Anchor Positioning. ::picker(select) { position-area: center center; inset: 0; } Practical Applications Use case: Creating curved or fanned UI layouts using sibling-index() to calculate unique rotation offsets for every folder or card in a list. Pitfall: Hard-coding rotation values without considering variable option counts; use sibling-count() for dynamic distribution. Use case: Implementing radial emoji pickers centered on the select button using CSS trigonometry functions like cos() and sin(). Pitfall: Failing to set inset: 0 on the picker pseudo-element, which causes the browser to clip the overflow of the radial layout. References: https://css-tricks.com/abusing-customizable-selects/