HTML <option> Tag

The <option> tag adds a selectable option to the dropdown list in a <select> control. When the dropdown is submitted the value of the selected option is sent.

HTML Tag

Example

#

A <select> 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>

Using <option>

The <option> tag creates an option item inside a <select>, <datalist>, or <optgroup> element.

Options can be used with or without any attributes and value.

When submitting the dropdown, the value of the selected option is sent.

More Examples

A <select> controls 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>

Attributes for <option>

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.


Did you know?

Did you know?

Styling the <option> tag with CSS

The appearance of <option> items can be changed with CSS.
Click on 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>

Browser support

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

You may also like

Guides