Sign up to save your podcasts
Or
Share Nice Select
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
Nice Select
This post pushes customizable 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!
Try it
Core Architecture
#
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
unlocks full customization of native elements while retaining browser controlled accessibility and keyboard navigation
Only enables custom styling for devices with hover and fine pointer (@media (hover) and (pointer: fine))
JS calculates an anchor offset for alignment while CSS handles all visual presentation and animation
Alignment & Positioning
#
Anchor 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?
Picker uses anchor(start) to position relative to the trigger button
When dropdown opens, the currently selected option aligns vertically with the button text via --_select-anchor-offset custom property
transform-origin
With 50% var(--_select-anchor-offset) ensures scale animations line up better with the selected option's position
position-try
flip-block, flip-inline automatically repositions the anchor position if the picker would overflow the viewport
Animation & Transitions
#
Scale effects with spring physics to scroll-driven option reveals, every interaction respects user motion preferences while providing rich feedback.
Defines entry animation initial state for the popover
Uses Open Props --ease-spring-3 for playful, physics-based motion on scale and rotation
display and overlay use allow-discrete for proper ::picker() popover animation support
::picker-icon rotates 180° on open with spring easing
Options animate in from the bottom using animation-timeline: view()
Animations and transitions wrapped in @media (prefers-reduced-motion: no-preference)
Active state scales down to 0.98 for tactile feedback
Select scales up to 1.04 when :open, scaling back down on close with a soft bounce
Theming & Color Handling
#
Automatic 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.
Enables automatic system color adaptation
Used for backgrounds that need different light/dark values
Canvas, CanvasText, Highlight, HighlightText for semantic, colors
Creates semi-transparent overlays and borders
Chevron and checkmark icons embedded as SVG data URIs with variants for each color scheme
@media (forced-colors: active) provides high-contrast mode adaptations (even the sticky scroll state respects this!)
Layout & Spacing
#
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.
All spacing, sizes, and timing values defined as --_select-* variables
inline-size, block-size, inset-block-start, margin-inline, padding-block for full RTL support
Precise vertical text alignment in legends
Options use flexbox with gap for icon + text layout
order: 2 and margin-inline-start: auto pushes checkmark to end of option
Scrolling & Overflow
#
Scroll-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) detection
Group headers stick to top when scrolling, with color change when stuck
scrollbar-width: thin and scrollbar-color with fade on hover-out
overscroll-behavior-block: contain prevents scroll chaining
scroll-behavior: smooth for programmatic scrolling (motion-safe)
JS adds .scrollable class when content exceeds max height, CSS adjusts padding accordingly
Customizable Select Features
#
New 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.
Pseudo-element for styling the dropdown picker container
Pseudo-element for the dropdown chevron indicator
Pseudo-element for the selected option indicator
Native element that mirrors selected option content in the button
corner-shape: superellipse(1.25) for modern rounded rectangles (with fallback)
State selector for when picker is visible
State selector for selected option
Accessibility & UX
#
Accessibility 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.
Distinct :focus (subtle) and :focus-visible (prominent)
option[disabled] styling and hover prevention
text-overflow: ellipsis in button display
36px item height matches mobile guidelines
JS skips [hidden] options in offset calculations
Arabic language demo validates bidirectional layout
Performance Optimizations
#
Careful optimization strategies keep animations smooth while minimizing layout thrash. Smart caching and compositor hints ensure the component performs well even on lower-end devices.
Hints to browser for compositor optimization (also fixes text shift bug)
Avoids expensive DOM measurements on every interaction;
auto-garbage-collected
auto-garbage-collected
Avoids getComputedStyle 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 config
background-clip: padding-box prevents background bleeding under border
Pre-defined black/white SVGs avoid runtime color manipulation
Example Variations
#
The 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.
Colored dots (green/red/gray) for on/off/disabled states
Circular images with person names
Title + description layout for status picker
Fieldsets with sticky legend headers
Color space picker with small label text above the selected value
Country picker organized by region
Try It
#
Experience the component in action on CodePen:
See the Pen <a href="https://codepen.io/argyleink/embed/preview/019c1f28-bbc2-7bac-ad4a-a7e41d3730f1"> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>)
on <a href="https://codepen.io">CodePen</a>.
Wrapping Up
#
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!
View all episodes
By This post pushes customizable 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!
Try it
Core Architecture
#
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
unlocks full customization of native elements while retaining browser controlled accessibility and keyboard navigation
Only enables custom styling for devices with hover and fine pointer (@media (hover) and (pointer: fine))
JS calculates an anchor offset for alignment while CSS handles all visual presentation and animation
Alignment & Positioning
#
Anchor 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?
Picker uses anchor(start) to position relative to the trigger button
When dropdown opens, the currently selected option aligns vertically with the button text via --_select-anchor-offset custom property
transform-origin
With 50% var(--_select-anchor-offset) ensures scale animations line up better with the selected option's position
position-try
flip-block, flip-inline automatically repositions the anchor position if the picker would overflow the viewport
Animation & Transitions
#
Scale effects with spring physics to scroll-driven option reveals, every interaction respects user motion preferences while providing rich feedback.
Defines entry animation initial state for the popover
Uses Open Props --ease-spring-3 for playful, physics-based motion on scale and rotation
display and overlay use allow-discrete for proper ::picker() popover animation support
::picker-icon rotates 180° on open with spring easing
Options animate in from the bottom using animation-timeline: view()
Animations and transitions wrapped in @media (prefers-reduced-motion: no-preference)
Active state scales down to 0.98 for tactile feedback
Select scales up to 1.04 when :open, scaling back down on close with a soft bounce
Theming & Color Handling
#
Automatic 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.
Enables automatic system color adaptation
Used for backgrounds that need different light/dark values
Canvas, CanvasText, Highlight, HighlightText for semantic, colors
Creates semi-transparent overlays and borders
Chevron and checkmark icons embedded as SVG data URIs with variants for each color scheme
@media (forced-colors: active) provides high-contrast mode adaptations (even the sticky scroll state respects this!)
Layout & Spacing
#
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.
All spacing, sizes, and timing values defined as --_select-* variables
inline-size, block-size, inset-block-start, margin-inline, padding-block for full RTL support
Precise vertical text alignment in legends
Options use flexbox with gap for icon + text layout
order: 2 and margin-inline-start: auto pushes checkmark to end of option
Scrolling & Overflow
#
Scroll-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) detection
Group headers stick to top when scrolling, with color change when stuck
scrollbar-width: thin and scrollbar-color with fade on hover-out
overscroll-behavior-block: contain prevents scroll chaining
scroll-behavior: smooth for programmatic scrolling (motion-safe)
JS adds .scrollable class when content exceeds max height, CSS adjusts padding accordingly
Customizable Select Features
#
New 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.
Pseudo-element for styling the dropdown picker container
Pseudo-element for the dropdown chevron indicator
Pseudo-element for the selected option indicator
Native element that mirrors selected option content in the button
corner-shape: superellipse(1.25) for modern rounded rectangles (with fallback)
State selector for when picker is visible
State selector for selected option
Accessibility & UX
#
Accessibility 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.
Distinct :focus (subtle) and :focus-visible (prominent)
option[disabled] styling and hover prevention
text-overflow: ellipsis in button display
36px item height matches mobile guidelines
JS skips [hidden] options in offset calculations
Arabic language demo validates bidirectional layout
Performance Optimizations
#
Careful optimization strategies keep animations smooth while minimizing layout thrash. Smart caching and compositor hints ensure the component performs well even on lower-end devices.
Hints to browser for compositor optimization (also fixes text shift bug)
Avoids expensive DOM measurements on every interaction;
auto-garbage-collected
auto-garbage-collected
Avoids getComputedStyle 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 config
background-clip: padding-box prevents background bleeding under border
Pre-defined black/white SVGs avoid runtime color manipulation
Example Variations
#
The 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.
Colored dots (green/red/gray) for on/off/disabled states
Circular images with person names
Title + description layout for status picker
Fieldsets with sticky legend headers
Color space picker with small label text above the selected value
Country picker organized by region
Try It
#
Experience the component in action on CodePen:
See the Pen <a href="https://codepen.io/argyleink/embed/preview/019c1f28-bbc2-7bac-ad4a-a7e41d3730f1"> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>)
on <a href="https://codepen.io">CodePen</a>.
Wrapping Up
#
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!