The HTML <select> element represents a control that provides a menu of options:

The above example shows typical <select> usage. It is given an id attribute to enable it to be 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.

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

You can further nest <option> elements inside <optgroup> elements to create separate groups of options inside the dropdown.

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

Attributes

This element includes the global attributes.

autocomplete
A DOMString 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
This attribute lets you specify the form element to which the select element is associated (that is, its "form owner"). If this attribute is specified, its value must be the same as the id of a form element in the same document. This enables you to place select elements anywhere within a document, not just as descendants of their form elements.
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. When multiple 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. when multiple 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 is 0.

Note: According to the HTML5 specification, the default value for size should be 1; however, in practice, this has been found to break some web sites, and no other browser currently does that, so Mozilla has opted to continue to return 0 for the time being with Firefox.

Styling with CSS

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 (such as jQuery UI), or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.

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

Examples

Basic select

The following example creates a very simple 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>

This renders as follows:

Advanced select with multiple features

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>

We haven't shown this as a live example on the page because it wouldn't display correctly (MDN currently strips out the multiple attribute when rendering the final page); instead you can view our multiple-select example on GitHub to see how it renders.

You'll see that:

  • Multiple options are selectable because we've included the multiple attribute.
  • The size 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 a disabled attribute and therefore can't be selected at all.

Note: On a desktop computer, hold the Ctrl, Command, or Shift keys while clicking to select or deselect multiple options.

Technical summary

Content categories flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element
Permitted content Zero or more <option> or <optgroup> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents any element that accepts phrasing content
Permitted ARIA roles menu
DOM interface HTMLSelectElement

Specifications

Specification Status Comments
HTML Living Standard
The definition of '<select>' in that specification.
Living Standard  
HTML5
The definition of '<select>' in that specification.
Recommendation  
HTML 4.01 Specification
The definition of '<select>' in that specification.
Recommendation  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Edge Full support YesFirefox Full support 1
Notes
Full support 1
Notes
Notes Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent <select> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for change events on <select>. See bug 1090602 for details.
IE Full support YesOpera Full support YesSafari Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a <select> will not be displayed if a background, border, or border-radius style is applied to the <select>.
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Edge Mobile Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.
Opera Android Full support YesSafari iOS Full support Yes
Notes
Full support Yes
Notes
Notes border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.
Samsung Internet Android Full support Yes
autofocusChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
disabledChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
formChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
multipleChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
requiredChrome Full support YesEdge Full support YesFirefox Full support 4IE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
sizeChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

See also