Select — HTML & CSS
A custom listbox with an optional type-to-filter search box. Keyboard accessible, closes on outside click, writes the chosen value into a hidden input for form submission.
Wiring it up in JS (init, events, API, Vue) is on the JavaScript page.
Live example
Color
Size — sm · default · lg
Shape (no color) — r-0 · default · r-round
Width — expand (fills the parent)
Last ui-select-change: —
Markup
A .UIselect container holds the displayed .UIselect-selected label, an arrow, a hidden <input> (receives the value), and a .UIselect-options list. Add a .UIselect-options__search <li> to enable filtering; mark the default with aria-selected="true":
<div class="UIselect primary" id="fruit" tabindex="0" role="listbox">
<span class="UIselect-selected">Pick a fruit</span>
<span class="UIselect-arrow"><!-- chevron svg --></span>
<input type="hidden" name="fruit" />
<ul class="UIselect-options" hidden>
<li class="UIselect-options__search" role="search">
<input type="text" aria-label="Search options" />
</li>
<li class="UIselect-options__items" role="presentation">
<ul role="group">
<li role="option" data-value="apple">Apple</li>
<li role="option" data-value="banana">Banana</li>
<li role="presentation" class="divider" aria-hidden="true"></li>
<li role="option" data-value="mango" aria-selected="true">Mango</li>
</ul>
</li>
</ul>
</div>A <li class="divider"> draws a separator; omit the search <li> for a plain dropdown.
Minimal markup
The smallest working Select — no search box, no arrow, no color:
<div class="UIselect" tabindex="0" role="listbox">
<span class="UIselect-selected">Select an option</span>
<input type="hidden" name="example" />
<ul class="UIselect-options" hidden>
<li class="UIselect-options__items" role="presentation">
<ul role="group">
<li role="option" data-value="1">Option 1</li>
<li role="option" data-value="2">Option 2</li>
</ul>
</li>
</ul>
</div>