Receive daily AI-curated summaries of engineering articles from top tech companies worldwide.
Endigest AI Core Summary
This article explores creative demos built with the new customizable <select> HTML element available in Chromium-based browsers.
•The customizable select is opted into via `appearance: base-select` on the `select` and `::picker(select)` pseudo-element, unlocking full CSS styling.
•New pseudo-elements like `::picker-icon` and `::checkmark` allow hiding or replacing default select UI parts.
•The `sibling-index()` CSS function enables per-option styling based on position, used here to create curved rotation effects across options.
•The `@starting-style` at-rule enables CSS transitions to play when elements first appear, critical for animating options as the dropdown opens.
•Non-supporting browsers gracefully degrade to a standard `<select>` since the customized element is still a valid `<select>`.
This summary was automatically generated by AI based on the original article and may not be fully accurate.
CSS-Tricks
WebKit