demo · v134

Multi-Style Gallery

Six dropdowns, one underlying <select>. Each card swaps a different design language onto the control — pill, brutalist, macOS, terminal, rich card, ghost — using only CSS now that appearance: base-select opens the picker for styling.

Heads up The gallery uses the new ::picker(select) pseudo-element and appearance: base-select — Chrome 134+. The page reads, but full styling only takes effect when those values are supported.

pill

Friendly chip-like control for filter rows.

brutalist flat

Hard shadow, mono, no rounding — fits editorial sites.

mac-style

Soft gradient, fine border — Aqua nostalgia.

terminal

Phosphor green on black for dev tooling and admin UIs.

rich card

Serif typeface, icon prefix on each option.

ghost

Dashed border, no fill — for non-primary actions.

change anything above — last picked value appears here

what's happening

Every card uses an honest <select> with appearance: base-select applied. Each variant adds its own border, background, font, and shadow. The picker pop-up is shaped via ::picker(select) — so the open menu inherits the same design language as the closed trigger.

None of this needs JavaScript. Form submission, keyboard navigation, screen reader support, mobile native pickers — all preserved because the element is still the platform <select>.