Custom Select Dropdown — Styled CSS/JS Snippet

A custom select dropdown is one of the most-searched UI snippets because the native HTML <select> cannot be styled freely — the same restyling problem as the custom checkbox and custom radio — yet every form needs a dropdown that matches the design. This snippet is a complete, accessible custom select: a styled trigger that shows the current value, an animated dropdown panel, hover and selected option states, a rotating caret, and the three things people always forget — outside-click close, keyboard support, and proper ARIA roles.

The structure: trigger plus options panel

The control has two parts inside a positioned .select wrapper. The .trigger is a real <button type="button"> showing the selected value in a .value span and a caret SVG. Below it, a <ul class="options"> holds the choices as <li role="option"> items. The wrapper has position: relative and the options panel is position: absolute directly beneath it, so the menu floats over the page without pushing content down. This trigger-plus-panel pattern is exactly how design-system selects (and comboboxes like the multi-select dropdown and autocomplete input) are built.

The open/close animation

The options panel is always in the DOM but hidden by default with opacity: 0; transform: translateY(-6px); pointer-events: none. Adding the .open class on the wrapper flips it to opacity: 1; transform: translateY(0); pointer-events: auto, and transition: opacity 0.16s, transform 0.16s animates a quick fade-and-slide-down. Using pointer-events: none while closed means the hidden menu never intercepts clicks even though it is still rendered, which keeps the animation smooth (animating opacity/transform is GPU-friendly) without the layout jump you get from toggling display: none.

The rotating caret and trigger focus ring

The caret SVG rotates 180° when open via .select.open .caret { transform: rotate(180deg) } with a transition: transform 0.2s, the universal signal that a dropdown is expanded. The trigger also gets a focus-style treatment when open: .select.open .trigger gains the brand border color and a soft box-shadow: 0 0 0 3px rgba(99,102,241,0.15) ring, so the active select stands out. Options show a light hover background, and the currently selected <li class="selected"> is tinted and bolded so users can see their current choice when they reopen the menu.

Selecting an option

The pick(li) function does three things: it clears .selected from every option, marks the clicked one, copies its text into the trigger's .value span, and closes the menu. Because the value lives in the trigger, the displayed selection always reflects the last choice. In a real form you would also write the value to a hidden <input> so it submits — that is a one-line addition (hiddenInput.value = li.dataset.value), and the snippet's structure makes it easy to add.

Outside-click and keyboard close — the parts tutorials skip

A dropdown that only closes when you pick an option is frustrating. This snippet adds a document-level click listener that closes any open select when the click lands outside it (if (!sel.contains(e.target))), the behavior users expect from every dropdown. It also wires keyboard handling on the focusable wrapper: Enter or Space opens/closes the menu (mirroring a native select), and Escape closes it. The wrapper has tabindex="0" so it is reachable by keyboard, and the trigger's aria-expanded attribute is kept in sync (true when open, false when closed) so assistive tech announces the state.

ARIA roles for accessibility

The native <select> is fully accessible for free, so when you replace it you must restore those semantics. This snippet uses role="listbox" on the control, role="option" on each item, aria-haspopup="listbox" and aria-expanded on the trigger, and aria-labelledby pointing at the label — the standard ARIA listbox pattern. For a fully production-grade combobox you would add roving tabindex and arrow-key navigation between options and aria-selected on the active item; this snippet gives you the structure and the essential roles to build on. When accessibility is critical and you do not need custom option styling, the native <select> remains the safest choice.

Customizing the select

Re-theme by changing the trigger border, the open-state ring color, and the selected-option tint. Adjust the panel's max-height: 240px and overflow-y: auto to control how many options show before scrolling — useful for long lists like countries. Change the animation by editing the 0.16s durations or the translateY(-6px) start offset. To add icons or flags, put an <img> or SVG inside each <li> and the .value span. Because the options are plain list items, you can group them with headings, add descriptions, or render them from data in a framework.