Summary
The HTML select (<select>
) element represents a control that presents a menu of options. The options within the menu are represented by {{HTMLElement("option")}}
elements, which can be grouped by {{HTMLElement("optgroup")}}
elements. Options can be pre-selected for the user.
Usage content
Content categories | flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element |
Permitted content | Zero or more {{HTMLElement("option")}} or {{HTMLElement("optgroup")}} elements. |
Tag omission | none, both the start tag and the end tag are mandatory |
Permitted parent elements | any element that accepts phrasing content |
Attributes
This element includes the global attributes.
- {{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}
- 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. - {{htmlattrdef("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. - {{htmlattrdef("form")}} {{HTMLVersionInline("5")}}
- The form element that the select element is associated with (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.
- {{htmlattrdef("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.
- {{htmlattrdef("name")}}
- The name of the control.
- {{htmlattrdef("required")}} {{HTMLVersionInline("5")}}
- A Boolean attribute indicating that an option with a non-empty string value must be selected.
- {{htmlattrdef("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.
DOM Interface
This element implements the HTMLSelectElement
interface.
Examples
<!-- The second value will be selected initially --> <select name="select"> <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.
The following is an example of how to simulate a select list with editable options, but be warned that screen readers and assistive devices will not interpret the form correctly; this example would be invalid HTML if the correct elements were used:
Specifications
Specification | Status | Comments |
---|---|---|
{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '<select>')}} | {{Spec2('HTML5 W3C')}} | |
{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}} | {{Spec2('HTML4.01')}} |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | {{CompatGeckoDesktop("1.0")}} [3] | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
required attribute |
{{CompatVersionUnknown}} | {{CompatGeckoDesktop("2.0")}} | 10 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} [1] | {{CompatGeckoMobile("1.0")}} [2] | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
required attribute |
{{CompatVersionUnknown}} | {{CompatGeckoDesktop("2.0")}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
[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 {{HTMLElement("select")}} will not be displayed if a {{ cssxref("background") }}, {{ cssxref("border") }}, or {{ cssxref("border-radius") }} style is applied to the {{HTMLElement("select")}}.
[2] Firefox for Android, by default, sets a {{ cssxref("background-image") }} gradient on all <select multiple>
elements. This can be disabled using background-image: none
.
[3] Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option>
element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and 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 {{event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.
Chrome and Safari both ignore {{cssxref("border-radius")}} on {{HTMLElement("select")}} elements unless {{cssxref("-webkit-appearance")}} is overridden to an appropriate value.
See also
- Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.