Select Animated
A real native dropdown restyled in CSS: indigo border and a drawn chevron that turns upward while the field has focus, with the system list kept.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Forms has 20 effects, including 2 free. Explore the category →
3 usage examples
How it works
The effect keeps a native <select>: only its look changes. appearance: none removes the system arrow, a 2 px rgba(99,102,241,.3) border and 10 px corners dress it, and the text takes its parent's colour (color: inherit). The list that opens is still the browser's, and on mobile the phone's native picker (wheel on iPhone, full-screen list on Android).
The chevron is the ::after pseudo-element of the .slx-field container: a 10 px square with only its right and bottom borders drawn, rotated 45°. When the select has focus, .slx-field:focus-within::after turns it to −135° (pointing up) in 0.3 s and the border becomes solid #6366f1; keyboard focus adds a light halo. So it turns on focus, not when the list opens: after a mouse choice, it stays up while the field keeps focus, and comes back down when you move on.
No JavaScript. The width is --slx-w (280 px by default, 100% to fill a column); classes are prefixed slx-.
Accessibility
- Accessible name: the select carries
aria-label="Your choice"; in a form, prefer a visible label by wrapping it all in a<label>("Time zone"), which names the field with noid. - Native keyboard: Tab, arrows, an option's first letter, Alt + down arrow to open: it all works since it is the browser's control.
- Visible focus: solid indigo border on focus, plus an
rgba(165,180,252,.45)halo on keyboard focus (:focus-visible). - Mobile: the list is the system's, with its text size and accessibility settings.
- Reduced motion: under
prefers-reduced-motion: reduce, the chevron and border change without transition.
Browser compatibility
CSS only: unprefixed appearance: none (Chrome 84, Firefox 80, Safari 15.4), :focus-within, ::after. Measured in Chromium 151, Firefox 153 and WebKit 26.5 (Playwright): mouse choice, Tab then arrow, two independent copies, 390 px, reduced motion. <option> styling (#1a1a2e background) is only applied by Chrome, Edge and Firefox on Windows and Linux; macOS and iOS show their system list.
Without appearance: none, the system arrow shows next to the drawn chevron; the menu stays fully usable.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0298-root">
<div class="slx-field">
<select name="choice" aria-label="Your choice">
<option value="">Choose an option...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Width (CSS — --slx-w) |
280px | 100% to fill a form column; the field never overflows its container (max-width: 100%). |
Colour (CSS — border-color on focus and the borders of .slx-field::after) |
#6366f1, resting border at 30% | Change all three together for a field consistent at rest and on focus. |
Chevron rotation (CSS — .slx-field:focus-within::after) |
rotate(-135deg) in .3s | Remove the rule for a fixed chevron, or lengthen the transition. |
Open list (CSS — select option) |
#1a1a2e background, white text | On a light background, switch to white background and dark text; ignored by Safari and iOS. |
Name and label (HTML — name, aria-label or <label>) |
choice · "Your choice" | Use the field's real name; a visible label beats an aria-label. |
Demo frame (CSS — .fx-0298-root) |
min-height 300px, #0a0a0f background, white text | Remove it in a real page; the select's text then follows the page's colour. |
FAQ
role="listbox", at the cost of the native picker on mobile.value="" on the first option (already the case) and required on the select: the form refuses to send until a real option is picked.
