Country Selector — Searchable Flag Dropdown Snippet

A native <select> of 200 countries is a usability nightmare — endless scrolling, no search, no flags. A proper country selector is a custom dropdown with a search box, recognisable flag icons, dial codes, and instant filtering. This snippet implements one in plain HTML, CSS, and vanilla JavaScript: a trigger button showing the chosen country, a panel with a search field, a scrollable list filtered live by name or dial code, a selected check, and the expected dismissal behaviours (click-outside and Escape).

Trigger and animated panel

The trigger button displays the current flag and country name with a caret that rotates when open. Opening toggles an .open class on the wrapper; the panel transitions from opacity: 0 and a slight translateY/scale to fully visible with its transform origin at the top, so it appears to drop and grow out of the trigger. The trigger's aria-expanded is kept in sync for assistive tech.

Live search by name or code

When the panel opens, the search field is cleared, the list is reset, and focus moves to the input after a short delay (so the open animation does not eat the focus). filterCountries lowercases the query and, for each option, checks whether the country name *or* the dial code contains it — so typing "44" finds the United Kingdom and "ind" finds India. Non-matching options get a .hidden class. The function also counts matches and toggles an .empty class on the list; a CSS sibling selector (.cs-list.empty + .cs-none) reveals a "No countries match" message with zero extra JavaScript.

Selection and dismissal

selectCountry clears the previous selection, marks the clicked option with a .selected class (which renders a check via ::after), copies the flag and name up to the trigger, and closes the panel. Dismissal is handled with two document-level listeners: a click that closes the panel when the target is outside the wrapper (using wrap.contains), and a keydown that closes on Escape. The search input stops click propagation so typing in it never bubbles up to the outside-click handler and closes the panel.

Built to scale to real data

Sixteen countries are included as a working example, but the markup is uniform — each option is a <li> with a data-name, a flag, a name, and a code — so rendering the full ISO country list from an array is a drop-in change, and the filter scales without modification. Pair this selector with a phone input for international numbers, a checkout payment form address step, or a multi-select dropdown for multi-country pickers.