select (HTML element)

Spec
Depr. Empty Version
No No HTML 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

<select multiple="multiple" name="string" size="number">
</select>

Description

The select form control is a container for a series of option elements that display in the browser as a pull-down menu (that is, a drop-down list). Unless you use the multiple attribute, the control will allow the user to pick just one item from the list of options that’s generated by the contents of the nested option elements. The select renders slightly differently depending on the browser and operating system in use, and is well known as a troublesome HTML element to style with CSS (because the display is inherited from the operating system, rather than provided by the browser). If there isn’t enough room on the page for the list to display below the control, it will open up above it. Figure 1 shows an expanded (opened) select list in Firefox.

Figure 1. An expanded select list An expanded select list

Example

This example shows a very simple select element:

<form>
  <label for="favoritefood">Favorite food</label>
  <select name="favoritefood" id="favoritefood">
    <option>Cheese</option>
    <option>Egg</option>
    <option>Cabbage</option>
    ⋮
  </select>
</form>

Use This For …

This element is used to allow visitors to make selections from a long list of items. The alternative approach would involve the use of radio input selections, but this would require all the options to be displayed on the page at once; select controls generally display in a smaller amount of page real estate.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

It causes no compatibility issues, and has excellent support across all tested browsers.

In this Section

User-contributed notes

ID:
#1
Contributed:
by kyberfabrikken
Date:
Sat, 17 May 2008 14:24:06 GMT

It should be noted, that if the <code>size</code> property is set, the widget is rendered different, than when it is not set.

Related Products