Dropdown controls are created with a <select> tag.
The <option> tag adds a selectable option to the dropdown list.
When the control is submitted the value of the selected option is sent.
A <select> dropdown control with 5 <option> items.
<select>
<option value="">-- Select city -- </option>
<option value="losangeles">Los Angeles</option>
<option value="newyorkn">New York</option>
<option value="houston">Houston</option>
<option value="chicago">Chicago</option>
</select>
The <option> tag creates an option item inside <select>, <datalist>, or <optgroup> elements.
Options can be used with or without any attributes and value.
When submitting the control, the value of the selected option is sent.
A <select> control with a list of cities.
The Houston <option> is pre-selected and Chicage is disabled (unselectable).
<select>
<option value="">-- Select city -- </option>
<option value="losangeles">Los Angeles</option>
<option value="newyork">New York</option>
<option value="houston" selected>Houston</option>
<option value="chicago" disabled>Chicago</option>
</select>
This table lists the <option> tag attributes.
| Attribute | Value | Description |
|---|---|---|
| label | text | The text that will display in the dropdown option. |
| value | text | Option value to be sent to a server. |
| selected | selected | Specifies whether the option is selected. |
| id | identifier | Defines a unique identifier for the option. |
| class | classnames | Sets one or more CSS classes to be applied to the option. |
| style | CSS-styles | Sets the style for the option. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the option is hidden. |
| disabled | disabled | Specifies whether the option is disabled. |
For additional global attributes see our global attributes list.
The appearance of <option> items can be changed with CSS.
Click the dropdown to see the styled options.
<style>
option.styled {background:steelblue;color:white;}
</style>
<select>
<option class="styled" value="">-- Select city -- </option>
<option class="styled" value="losangeles">Los Angeles</option>
<option class="styled" value="newyork">New York</option>
<option class="styled" value="houston">Houston</option>
<option class="styled" value="chicago">Chicago</option>
</select>
Here is when <option> support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
