W3cubDocs

/HTML

<select>

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

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`

Attributes

This element includes the global attributes.

autofocus HTML5: This attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean.
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 HTML5: 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 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.
name: This attribute is used to specify the name of the control.
required HTML5: A Boolean attribute indicating that an option with a non-empty string value must be selected.
size: If the control is presented as a scrolled list box, 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.

Firefox 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.

Examples

<!-- The second value will be selected initially -->
<select name="text"> <!--Supplement an id here instead of using 'text'-->
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

Result

Notes

The content of this element is static and not editable.

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

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	Yes²	Yes	1³	Yes	Yes	Yes²
`autofocus`	Yes	Yes	1	Yes	Yes	Yes
`disabled`	Yes	Yes	1	Yes	Yes	Yes
`form`	Yes	Yes	1	Yes	Yes	Yes
`multiple`	Yes	Yes	1	Yes	Yes	Yes
`name`	Yes	Yes	1	Yes	Yes	Yes
`required`	Yes	Yes	4	10	Yes	Yes
`size`	Yes	Yes	1	Yes	Yes	Yes

Feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic support	Yes¹ ²	Yes²	Yes	4⁴	Yes	Yes	Yes²
`autofocus`	Yes	Yes	Yes	4	Yes	Yes	Yes
`disabled`	Yes	Yes	Yes	4	Yes	Yes	Yes
`form`	Yes	Yes	Yes	4	Yes	Yes	Yes
`multiple`	Yes	Yes	Yes	4	Yes	Yes	Yes
`name`	Yes	Yes	Yes	4	Yes	Yes	Yes
`required`	Yes	Yes	Yes	4	No	Yes	Yes
`size`	Yes	Yes	Yes	4	Yes	Yes	Yes

1. 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>.

2. border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.

3. 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.

4. Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.