Customizable <select> Element

concepts

1. Customizable Select

   <select> learns base-appearance + slottable button / option content. Custom dropdowns finally with native semantics, accessibility, and form submission.

2. Rich option content

   The motivating user-picker case: avatars, two-line labels, meta text inside <option> — while still submitting a plain value through a real <form>.

3. Multi-Style Gallery

   Six dropdowns, one underlying <select>. Each card swaps a different design language — pill, brutalist, mac, terminal, rich card, ghost — using only CSS.

4. Picker Anatomy

   Live editor for the new pseudo-elements: ::picker(select), ::picker-icon, the option list, the selectedcontent button. Drag sliders, copy the generated CSS.

5. Form Integration

   A complete bug-report form with three customizable selects (category, priority with colour dots, severity). Demonstrates that appearance: base-select selects fully participate in HTML constraint validation, required, and FormData.

6. Themed Select

   Four visual themes — Editorial, Pill, Terminal, Pastel — each driven by CSS custom property tokens. Switching the theme updates --sel-bg, --sel-border, --sel-radius and others; every select on the page morphs together with a live token inspector.

why it shipped

A common frustration for developers who try to work with the browser's built-in form controls, particularly <select>, is that they cannot customize the appearance of these controls to fit their site's design or user experience. Since the browser platform has limited ability for customization of <select>, developers often end up rolling their own implementations. When developers reimplement form controls from scratch, they're not able to leverage the work done on the Web Platform to optimize performance, reliability, and accessibility of the native controls. Providing a fully customizable <sele

references

• ChromeStatus entry
• Spec