Usage

Select boxes (also known as drop-down lists) are provided for completeness, but should be avoided where possible.

Select boxes have several inherent disadvantages:

• they are implemented inconsistently on various devices
• they hide content from the user by default
• they present usability difficulties for users with low digital literacy.

For most small lists (for example, choosing an Australian state or territory), consider using radio buttons, checkboxes (where multiple selections are allowed) or text inputs instead.

In a scenario with a long list of options (for example, selecting a country), select boxes may provide an acceptable trade-off between usability and layout compactness.

Appearance

The design of the select box is intended to match the text-inputs and buttons used in the system. This way form elements can be combined inline.

For cross-browser consistency, the default browser styles for select-boxes are removed and a background image is used for the icon. For more info see Styling HTML forms