- 2026-03-11 — Abusing Customizable Selects
- 2026-03-03 — 2026 F1 Drivers Custom Select demo
- 2026-02-03 — Nice Select
- 2025-07-05 — custom
<select>with CSS 🧑🍳 - 2025-07-01 — Custom Select (that comes up from the bottom on mobile)
- 2025-03-24 — The
<select>element can now be customized with CSS (Chrome 135) - 2025-03-15 — The customizable select - Part one: history, trickery, and styling the select with CSS
- 2025-03-10 — Future of CSS: Select styling without the hacks
- 2025-01-10 — Updates to the customizable select API
- 2024-12-03 — 2025 gonna be the year of customized
<select> - 2024-09-19 — Custom
<select>boilerplate + transitions - 2023-07-25 — Demo examples
- 2023-06-01 — Advanced Form Control Styling With Selectmenu And Anchoring API
- Open UI's
<selectlist>demos - Open UI's issues
- Open UI's design decisions
- Open UI's explainer
- WHATWG Stage 1: Stylable
<select>element
Opt-in mode:
select, ::picker(select) {
appearance: base-select;
}Alternative snippet:
select {
appearance: none;
@supports (appearance: base-select) {
&,
&::picker(select) {
appearance: base-select;
}
}
}<select class="my-custom-select">
<div slot="button">
<span behavior="selected-value" slot="selected-value"></span>
<button behavior="button"></button>
</div>
<div slot="listbox">
<div popover="auto" behavior="listbox">
<option value="one">one</option>
<option value="two">two</option>
</div>
</div>
</select>
<select>
<button class="action-btn" type="button">
<selectedoption>
<span class="preview-heading">Create a merge commit</span>
<span class="action-heading">Merge Pull Request</span>
<span class="description">All commits from this branch will be added to the base branch via a merge commit.</span>
</selectedoption>
</button>
<button class="open-list-btn" type="selectlist">
<span class="arrow">
<figure>↓</figure> <!-- should be image, using this for demo shortcut only -->
</span>
</button>
<listbox>
<option value="merge-commit">
<span class="preview-heading">Create a merge commit</span>
<span class="action-heading">Merge Pull Request</span>
<span class="description">All commits from this branch will be added to the base branch via a merge commit.</span>
</option>
<option value="squash-merge">
<span class="preview-heading">Squash and merge</span>
<span class="action-heading">Squash and merge</span>
<span class="description">The 1 commit from this branch will be added to the base branch.</span>
</option>
<option value="rebase-merge">
<span class="preview-heading">Rebase and merge</span>
<span class="action-heading">Rebase and merge</span>
<span class="description">The 1 commit from this branch will be rebased and added to the base branch.</span>
</option>
</listbox>
</select>