This post pushes customizable <select> to an extreme. I think it turned out nice.
It's mostly CSS! A li'l JS sprinkle just to position the ::picker() and the selected option together; the JS is nice to have, CSS does the real work.
superellipse forced colors light/dark theme slick scrollbar scroll driven animations scroll-state stuck query scroll-state scrollable query overscroll behavior smooth scroll RTL support text-box trim spring easing anchor & anchor fallbacks color-mix()
Chrome only atm, and I keep mobile with the native select. Still cool!
This component builds on the new appearance: base-select foundation, combining native accessibility with sweet visual control. Progressive enhancement ensures the custom experience only loads on capable devices.
The examples in this post just look like regular select elements in Firefox and Safari. Firefox is working on it though!
appearance: base-select<select> elements while retaining browser controlled accessibility and keyboard navigationAnchor positioning plus some special JS sauce to write an inline CSS variable unlocks the picker to position near the selected option (obviously this can't work at the viewport edges). This creates a pleasant morphing effect that feels connected.
Maybe I should have used AIM?
anchor(start) to position relative to the trigger button --_select-anchor-offset custom property transform-origin50% var(--_select-anchor-offset) ensures scale animations line up better with the selected option's position position-tryflip-block, flip-inline automatically repositions the anchor position if the picker would overflow the viewportScale effects with spring physics to scroll-driven option reveals, every interaction respects user motion preferences while providing rich feedback.
@starting-style--ease-spring-3 for playful, physics-based motion on scale and rotationallow-discrete for proper ::picker() popover animation support::picker-icon rotates 180° on open with spring easinganimation-timeline: view()@media (prefers-reduced-motion: no-preference)0.98 for tactile feedback1.04 when :open, scaling back down on close with a soft bounceAutomatic light/dark adaptation leverages system colors and modern color functions for seamless theme switching. Definitely check the support for light/dark forced colors too, a really great way to debug spacing and skeletal aspects of the UI.
color-scheme: light darklight-dark() functionCanvas, CanvasText, Highlight, HighlightText for semantic, colorscolor-mix()@media (forced-colors: active) provides high-contrast mode adaptations (even the sticky scroll state respects this!)Logical properties enable true internationalization with automatic RTL support, while text-box trim delivers pixel-perfect vertical alignment. Custom properties create a flexible design token system.
--_select-* variablesinline-size, block-size, inset-block-start, margin-inline, padding-block for full RTL supporttext-box: trim-both cap alphabeticorder: 2 and margin-inline-start: auto pushes checkmark to end of optionScroll-state queries dynamically detect when content is scrollable and when sticky headers become stuck. Custom scrollbar styling and smooth scrolling enhance the browsing experience within long option lists.
container-type: scroll-state enables @container scroll-state(stuck) detectionscrollbar-width: thin and scrollbar-color with fade on hover-outoverscroll-behavior-block: contain prevents scroll chainingscroll-behavior: smooth for programmatic scrolling (motion-safe).scrollable class when content exceeds max height, CSS adjusts padding accordinglyNew pseudo-elements provide surgical styling control over picker components, while superellipse corners deliver the modern aesthetic popularized by iOS. State selectors enable precise targeting of open and selected states.
::picker(select)::picker-icon::checkmark<selectedcontent>corner-shape: superellipse(1.25) for modern rounded rectangles (with fallback):open pseudo-class:checked on optionsAccessibility is built-in with proper focus indicators, keyboard navigation, and semantic markup thanks to the web platform. Touch-friendly targets and overflow handling ensure the component works elegantly across all input methods.
:focus (subtle) and :focus-visible (prominent)option[disabled] styling and hover preventiontext-overflow: ellipsis in button display36px item height matches mobile guidelines[hidden] options in offset calculationsCareful optimization strategies keep animations smooth while minimizing layout thrash. Smart caching and compositor hints ensure the component performs well even on lower-end devices.
will-change: scalegetComputedStyle forced reflows during initialization. Tried dynamically computing these in a hidden instance, but couldn't get it as close as just "hardcoding / speficying them ahead of time" in a configbackground-clip: padding-box prevents background bleeding under borderThe component architecture supports diverse use cases, from simple toggles to rich content pickers. Each variation demonstrates how the base patterns adapt to different content and interaction models.
Experience the component in action on CodePen:
See the Pen by Adam Argyle (@argyleink) on CodePen.There's room for improvement, please fork and offer feedback!
I tried many variants of animation, trying to reduce some of the shift of the positioning, but never found something that worked across all the variants. Help me?! 🙏
This select component intends to showcase what's possible when we combine modern CSS features with thoughtful progressive enhancement. The appearance: base-select property provides the foundation, while anchor positioning, scroll-state queries, and entrance animations create a polished, accessible experience.
The real power lies in how these features compose together—each enhancement builds on platform primitives rather than fighting against them. The result is a component that's maintainable, accessible, and ready for the next generation of web interfaces.
Most importantly, this approach lets us create custom experiences without sacrificing the keyboard navigation, focus management, and screen reader support that come free with native elements.
For more, checkout nice details!
working on implementing a version of this in our design system as we speak! looks really cool! now let’s do date pickers and combo boxes :)
@nerdy.dev Looks lovely, I’m doing something similar atm. But I’m stuck with wanting to ”remote closing” the menu via JS also. Is there something similar to showPicker - but inverted - coming, do you know? Like hidePicker()Anton Andreasson Gistedt
cc @una.im for advice here! picker() is a popover, curious if it can be targetted and closed as such? and sounds like you're already aware of the new showPicker(), not sure what's up with a hidePicker()Adam Argyle
I once wrote: "browser-native solutions are almost always much more muture than JS-custom ones" This is so true, for example dialogs, expect for web components.
@una.im, more of this please.
That is rad! Excited to use it as browsers catch up with support. Thanks for showing the possibilities of what it can do ????
@nerdy.dev has got you covered!
Sooo cool. I'm very excited for all this to come to multi select boxes so we can make nice tag selector inputs natively etc. Any idea if this is coming?Neil
Love it buddy and particularly the links to the upvote links
joey is workin on it I believe, both a custom listbox and multiselect
Nice! Joey?
Oh my. I shed a tear of web-joy. ???? what a time to be alive!
Those are some good looking selects.
::picker() is technically a popover but there is some interaction weirdness (see github.com/whatwg/html/...), which stretches to closePopover(). One way to programmatically close it would be to open (& close) another auto popover to close it (though this is super hacky & we need a better solution)
This is really nice! Where do you get your icons, if you don’t mind my asking?
here! icones.js.org
@nerdy.dev Another thing: I notice you use `fieldset` instead of `optgroup`, is that because styleability? I have had a hard time styling my optgroups.. but kept them becuase semantics, I guess.
fieldset/legend is the approved semantic way to create an optgroup that you can style ????????
very rad!!!! ????
I’d like to - improve the viewport edge positioning logic - tighten the option alignment morph - get rid of the white space at the bottom of the picker scrollport - show variants that position over, under etc
Frontend Dogma
The CSS appearance: base-select unlocks a real power of customizable select HTML elements. What's coolest about it is that you can use it today — progressive enhancement ftw (em-dash, yeah! people can do it too). This demo by @argyleink is sick!
css Nice Select · February 3, 2026Paweł Grzybek
@Aaron when I used to teach this stuff, I had two rules:
1. Is it accessible (AIM)?
2. Is it supported in all major browsers today?The rest is experimentation at best and CCS complication at worst.
Dave Everitt
I don’t wanna yuck your yum here but chrome only makes it a pass for me. I’m still cleaning up code for IE and that is an ick I regularly get to taste.
it rhymes with satan
