<select> HTML select element

Try it

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

Attributes

This element includes the global attributes.

autocomplete

A string providing a hint for a user agent's autocomplete feature. See The HTML autocomplete attribute for a complete list of values and details on how to use autocomplete.

autofocus

This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form element in a document can have the autofocus attribute.

disabled

This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example <fieldset>; if there is no containing element with the disabled attribute set, then the control is enabled.

form

The <form> element to associate the <select> with (its form owner). The value of this attribute must be the id of a <form> in the same document. (If this attribute is not set, the <select> is associated with its ancestor <form> element, if any.)

This attribute lets you associate <select> elements to <form>s anywhere in the document, not just inside a <form>. It can also override an ancestor <form> element.

multiple

This Boolean attribute indicates that zero or more options can be selected in the list. If it is not specified, then only one option can be selected at a time. Multiple selected options are submitted using the URLSearchParams array convention, i.e., name=value1&name=value2. If multiple is specified, size defaults to 4 instead of 1.

name

This attribute is used to specify the name of the control.

required

This Boolean attribute indicates that the user must select at least one option before the form can be submitted. The <select> has no selected options if it has no options, multiple is specified and the user deselects all options, the select's value is programmatically set to "", or only the placeholder label option is selected. Any option other than the placeholder label option is considered valid, even if its value is also empty.

The placeholder label option is the text shown in the box before the user makes a choice, like the "--Please choose an option--" in the Try it demo above. Semantically, it is considered equivalent to the placeholder attribute and is not considered an actual option. It is defined as the first option in the options list which is a direct child of the <select> (not inside an <optgroup>) and has an empty string as its value. It is only relevant when the size is 1 and multiple is not specified; in all other cases, such an <option> is just a regular option due to the way the <select> is rendered.

size

This attribute represents the number of options to show at once, and must be a positive integer. If the value is 1, browsers will render a drop-down list. If the value is greater than 1, browsers will render a scrolling list box that has the specified number of rows visible. If the attribute is not specified, the default value is 1. If the multiple attribute is specified, the default value is 4. However, due to backwards compatibility, the size property will always return 0 as the default value.

Usage notes

Typically, like other form controls, a <select> element is associated with a <label> for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server. Each menu option is defined by an <option> element nested inside the <select>.

Each <option> element should have a value attribute containing the data value to submit to the server when that option is selected. If no value attribute is included, the value defaults to the text contained inside the element. You can include a selected attribute on an <option> element to make it selected by default when the page first loads. If no selected attribute is specified, the first <option> element will be selected by default.

A <select> element is represented in JavaScript by an HTMLSelectElement object, and this object has a value property which contains the value of the selected <option>.

You can further nest <option> elements inside <optgroup> elements to create separate groups of options inside the dropdown. You can also include <hr> elements to create separators that add visual breaks between options.

For further examples, see The native form widgets: Drop-down content.

Options inside wrapper elements

The <select> element builds its list of options from all <option> descendants, not just its direct children. This means that options can be wrapped in other elements, such as <div> elements, and they will still appear as selectable options in the dropdown and be included in form submission. Wrapper elements are useful for styling in customizable select elements but have no effect on the select's behavior: they don't create groups, labels, or separators. To group options under a heading, use an <optgroup>; an <option> counts as part of an <optgroup> if the group is an ancestor, so wrapper elements may also be used inside a group without breaking the association.

Selecting multiple options

On a desktop computer, there are a number of ways to select multiple options in a <select> element with a multiple attribute and a size attribute greater than 1.

Mouse users can hold the Ctrl, Command, or Shift keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them.

Keyboard users can select multiple contiguous items by:

• Focusing on the <select> element (e.g., using Tab).
• Selecting an item at the top or bottom of the range they want to select using the Up and Down cursor keys to go up and down the options.
• Holding down the Shift key and then using the Up and Down cursor keys to increase or decrease the range of items selected.

Keyboard users can select multiple non-contiguous items by:

• Focusing on the <select> element (e.g., using Tab).
• Holding down the Ctrl key then using the Up and Down cursor keys to change the "focused" select option, i.e., the one that will be selected if you choose to do so. The "focused" select option is highlighted with a dotted outline, in the same way as a keyboard-focused link.
• Pressing Space to select/deselect "focused" select options.

Styling with CSS

The <select> element has historically been difficult to style effectively with CSS. The following guides contain information about features that enable fully customizable select elements:

• Customizable select elements
• Customizable select listboxes

Legacy select styling

In browsers that don't support the modern customization features (or legacy codebases where they can't be used), you are limited to manipulating the box model, the displayed font, etc. You can also use the appearance property to remove the default system appearance.

It is however, hard to get a consistent result across browsers with traditional <select> elements. 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.

You can use the :open pseudo-class to style <select> elements in the open state, that is, when the drop-down options list is displayed. This doesn't apply to multi-line <select> elements (those with the multiple attribute set) — they tend to render as a scrolling list box rather than a drop-down, so don't have an open state.

For more information on legacy <select> styling, see:

• Styling HTML forms
• Advanced styling for HTML forms
• The field-sizing property, which controls how <select> elements are sized in relation to their contained options.

Accessibility

The <hr> within a <select> should be considered purely decorative, as they are currently not exposed within the accessibility tree and therefore not exposed to assistive technologies.

Examples

Basic select

The following example creates a three-value dropdown menu. The second option includes the selected attribute, making that option selected by default.

<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

Result

Select with grouping options

The following example creates a dropdown menu with grouping using <optgroup> and <hr> to make it easier for the user to understand the content in the dropdown.

<label for="hr-select">Your favorite food</label> <br />

<select name="foods" id="hr-select">
  <option value="">Choose a food</option>
  <hr />
  <optgroup label="Fruit">
    <option value="apple">Apples</option>
    <option value="banana">Bananas</option>
    <option value="cherry">Cherries</option>
    <option value="damson">Damsons</option>
  </optgroup>
  <hr />
  <optgroup label="Vegetables">
    <option value="artichoke">Artichokes</option>
    <option value="broccoli">Broccoli</option>
    <option value="cabbage">Cabbages</option>
  </optgroup>
  <hr />
  <optgroup label="Meat">
    <option value="beef">Beef</option>
    <option value="chicken">Chicken</option>
    <option value="pork">Pork</option>
  </optgroup>
  <hr />
  <optgroup label="Fish">
    <option value="cod">Cod</option>
    <option value="haddock">Haddock</option>
    <option value="salmon">Salmon</option>
    <option value="turbot">Turbot</option>
  </optgroup>
</select>

Result

Advanced select with multiple features

The following example is more complex, showing off more features you can use on a <select> element:

• The multiple attribute enables selecting more than one option.
• The size attribute is set to 4, which means 4 lines are displayed at a time. Users can scroll to view all the options.
• Two <optgroup> elements are included, creating two visual groupings, generally with the group name being bolded and nested options being indented.
• The disabled attribute is included on the "Hamster" option, making that option not selectable.

<label>
  Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>

Result

Technical summary

Specifications

Browser compatibility

See also

• The <option> element
• The <optgroup> element
• Customizable select elements
• Events fired by <select>: change, input