Accessibility Issues

[joshbader]

trafficstars

Would be nice to be able to use a standard select dropdown as an option as well as handle keyboard navigation properly. Currently, hidden options are still tabbable even when the dropdown is collapsed. Also, the up/down arrow keys should be able to navigate the options within the dropdown and hitting the space bar should trigger selecting the focused item.

[samuelmeuli]

A select element is hard to style and cannot be used for the font previews:

The <select> element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the box model, the displayed font, etc., and you can use the appearance property to remove the default system appearance.

However, these properties don't produce a consistent result across browsers, and it is hard to do things like line different types of form element up with one another in a column. The <select> element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.

Source: MDN

[samuelmeuli]

Accessibility could definitely be improved, though. PRs are welcome :)

[joshbader]

Good point about the font previews, but styling a select is much easier than it used to be. See here: https://www.filamentgroup.com/lab/select-css.html