0Pricing
HTML Academy · Lesson

The selectlist Element

Customize dropdown controls with the proposed selectlist element.

The selectlist Element is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Long-Standing Limitation

The <select> element is one of the only form controls whose appearance cannot be styled. Every CSS rule applied to it (custom borders, fonts, option styles) is ignored by the browser, leading to thousands of "custom dropdown" libraries duplicating native behavior just to get styled options.

What selectlist Is

<selectlist> (also seen as <selectmenu>) is a native HTML element designed as a stylable replacement for <select>. It accepts the same conceptual model — a button trigger and a list of options — but every part is exposed for CSS customization.

<selectlist>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</selectlist>

Parts You Can Style

selectlist exposes the button (the closed-state trigger), the listbox (the open dropdown), and the options. CSS pseudo-elements (::part(button), ::part(listbox)) let you style each one without affecting native behavior.

Customizing Options

Options inside selectlist can contain arbitrary content — icons, descriptions, custom layouts — not just text. The browser still handles selection logic, keyboard navigation, and focus management, while you control the appearance freely.

Built-in Behaviors Preserved

selectlist keeps everything <select> does well: keyboard navigation (arrows, type-ahead), screen reader announcements, form participation, focus management. You inherit the accessible behavior and get to style the UI on top.

Custom Button

Provide a slot for the trigger: <button slot="button">Choose fruit <svg>...</svg></button>. The button is yours to design — replace the native triangle with a custom icon, add labels, change colors. The browser still handles open/close.

Form Participation

selectlist participates in form submission just like select: it has a name attribute, a value, and submits with the form. Server-side handling is identical. Drop-in replacement at the markup level for most select use cases.

Browser Support

selectlist is an early-stage feature. As of 2026 it is shipping in Chromium-based browsers behind flags or in limited form. Firefox and Safari are not yet there. Production use requires fallback to a regular <select> for unsupported browsers.

Polyfill Difficulty

Polyfilling a fully-accessible custom dropdown that matches native behavior is hard — focus traps, keyboard navigation, screen reader integration, form participation. Libraries like Downshift, Combobox, react-aria do this work for thousands of lines of code. selectlist replaces all that with one element.

When to Adopt

For internal apps or Chromium-only deployments, selectlist saves significant code today. For broad-audience public sites, wait for Firefox and Safari support or use a wrapping library that uses selectlist where supported and falls back to a custom React/Vue dropdown elsewhere.

Replacement Roadmap

Once selectlist ships everywhere, expect a wave of custom dropdown libraries to deprecate or become thin wrappers around the native element. Watch the standards process; the API has gone through revisions and may continue to evolve before final standardization.

Implications for Design

Designers can now specify pixel-perfect dropdowns without "Here is the design but the dropdown will look different in the browser" caveats. selectlist removes one of the longest-standing visual inconsistencies between design mockups and shipped HTML.

Knowledge Check

Why does the selectlist element matter — what limitation of native