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].

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].

Select List

<selectlist> is an early initiative to improve the browser-native select capabilities and allow more customization. The select list will be able to cover single select, multi select, and combobox. [open-ui.org, open-ui.org]. Implementations are under way in some browsers [chromestatus.com]. Demos for supporting browsers are available [microsoftedge/Demos].

The specification and/or implementations may still have accessibility problems [openui/open-ui#476].

Articles outlining selectmenu in detail are available [css-tricks.com, hidde.blog].

Polyfill [luwes/selectlist-polyfill].

<selectlist> was called <selectmenu> in earlier revisions of the specification [openui/open-ui#773].