v145 · HTML · Basic Listbox Demo
Basic Listbox Demo
Compare an unstyled default <select size> listbox with a fully customised version using appearance: base-select. Both use the same HTML — only the CSS differs. The multi-select variant uses Ctrl/Cmd+click for multiple selection.
Chrome 145 required for
appearance: base-select on listbox selects. In older browsers the custom styles fall back gracefully — the select still works but renders with the system appearance.
single-select listbox
Default — browser appearance
Select an item above
Styled — appearance: base-select
Select an item above
multi-select listbox
Hold Ctrl / Cmd to select multiple items, Shift for a range.
Default — browser appearance
Select items above
Styled — appearance: base-select
Select items above
CSS used
/* Opt in to base appearance */
select {
appearance: base-select;
}
/* Listbox container */
select[size], select[multiple] {
border: 2px solid var(--border-black);
border-radius: 3px;
background: var(--bg-stone);
padding: 0.25rem;
}
/* Individual options */
option {
padding: 0.35rem 0.7rem;
border-radius: 2px;
cursor: pointer;
}
option:hover {
background: var(--bg-paper);
}
/* Selected option */
option:checked {
background: var(--text-black);
color: var(--bg-ivory);
font-weight: 600;
}