Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla
Your Search Results

    <select>

    This article is in need of a technical review.

    Summary

    The HTML select (<select>) element represents a control that presents a menu of options. The options within the menu are represented by <option> elements, which can be grouped by <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 <option> or <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.

    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
    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.
    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
    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 elements 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 have opted to continue to return 0 for the time being with Firefox.

    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:

    This is an example of an editable select through a <fieldset> of radioboxes and textboxes (written in pure CSS, without JavaScript), 

    Specifications

    Specification Status Comments
    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 Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
    required attribute (Yes) 4.0 (2.0) 10 (Yes) (Yes)
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support (Yes) [1] 1.0 (1.0) [2] (Yes) (Yes) (Yes)
    required attribute (Yes) 4.0 (2.0) Not supported (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] Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.

    Chrome and Safari both ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.

    See also