<label for="pet-select">Choose a pet:</label><select name="pets">  <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;}

The above example shows typical<select> usage. It is given anid attribute to enable it to be associated with a<label> for accessibility purposes, as well as aname 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 avalue attribute containing the data value to submit to the server when that option is selected. If novalue attribute is included, the value defaults to the text contained inside the element. You can include aselected attribute on an<option> element to make it selected by default when the page first loads. If noselected attribute is specified, the first<option> element will be selected by default.

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

The<select> element has some unique attributes you can use to control it, such asmultiple to specify whether multiple options can be selected, andsize to specify how many options should be shown at once. It also accepts most of the general form input attributes such asrequired,disabled,autofocus, etc.

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, seeThe native form widgets: Drop-down content.

This element includes theglobal attributes.

autocomplete

A string providing a hint for auser agent's autocomplete feature. SeeThe 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 theautofocus 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 thedisabled attribute set, then the control is enabled.

form

The<form> element to associate the<select> with (itsform owner). The value of this attribute must be theid 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 multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. Whenmultiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.

name

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

required

A Boolean attribute indicating that an option with a non-empty string value must be selected.

size

If the control is presented as a scrolling list box (e.g., whenmultiple is specified), this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is0.

Note:According to the HTML specification, the default value for size should be1; however, in practice, this has been found to break some websites, and no other browser currently does that, so Mozilla has opted to continue to return0 for the time being with Firefox.

On a desktop computer, there are a number of ways to select multiple options in a<select> element with amultiple attribute:

Mouse users can hold theCtrl,Command, orShift 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., usingTab).
• Selecting an item at the top or bottom of the range they want to select using theUp andDown cursor keys to go up and down the options.
• Holding down theShift key and then using theUp andDown 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., usingTab).
• Holding down theCtrl key then using theUp andDown 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.
• PressingSpace to select/deselect "focused" select options.

The<select> element has historically been notoriously difficult to style productively with CSS, hence features being introduced to enable creatingfully customizable select elements.

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

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, andWAI-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 themultiple 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
• Thefield-sizing property, which controls how<select> elements are sized in relation to their contained options.

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.

The following example creates a three-value dropdown menu, the second option of which is selected by default.

<!-- The second value will be selected initially --><select name="choice">  <option value="first">First Value</option>  <option value="second" selected>Second Value</option>  <option value="third">Third Value</option></select>

Result

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">  <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

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

<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

You'll see that:

• Multiple options are selectable because we've included themultiple attribute.
• Thesize attribute causes only 4 lines to display at a time; you can scroll to view all the options.
• We've included<optgroup> elements to divide the options up into different groups. This is a purely visual grouping, its visualization generally consists of the group name being bolded, and the options being indented.
• The "Hamster" option includes adisabled attribute and therefore can't be selected at all.

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