Select

Some browsers support <hr> separators as child elements within <select> [adrianroselli.com, webkit.org, webkit.org, chrome-dev].

Single Select

• Setting appearance:none removes some of the default select styling (e.g. the arrow) [MDN].

Customizable Select

Around 2025, more capabilities started landing in browsers to customize and extend selects. It is still based on the plain old <select> element, but there is an opt-in to the extended customization.

• developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
• caniuse.com/selectlist
• github.com/WebKit/standards-positions/issues/386
• github.com/mozilla/standards-positions/issues/1060
• developer.chrome.com/blog/a-customizable-select
• una.im/select-updates
• developer.chrome.com/blog/rfc-customizable-select
• open-ui.org/components/customizableselect

Multiselect

The select element has on optional multiple attribute to allow multiple options to be selected [MDN].

• The UI element that browsers render for multiple selection is usually not considered very user-friendly or accessible [webaim.org, webaim.org].

The aria-multiselectable attribute indicates that multiple items may be selected from the current selectable [MDN].

Combobox

A combobox is a combination of an input field and a select box. A user can either select a predefined option or type a custom value.

A simple combobox can be achieved using a text input with a list attribute [MDN] combined with the datalist element [MDN].

• Accessibility support for datalist is relatively good [a11ysupport.io]. In some web browser, though, it may not be very user-friendly as there may be no indication that the input also has predefined options to select from.
• The showPicker() method opens the picker UI of the input field [MDN].