<option> HTML 元素用于定义包含在 {{HTMLElement("select")}}、{{HTMLElement("optgroup")}} 或 {{HTMLElement("datalist")}} 元素中的一项。因此，<option> 可表示弹出菜单中的条目，以及 HTML 文档中其他项目列表中的条目。

{{InteractiveExample("HTML 演示：<option>", "tabbed-standard")}}

```html interactive-example 


```css interactive-example
label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

属性

该元素包含全局属性。

  • disabled
    • : 如果设置了这个布尔属性，则该选项不可被选中。浏览器通常会将这样的控件显示为灰色，并且不会接收任何浏览事件，例如鼠标点击或与焦点相关的事件。如果未设置该属性，当某个父元素是被禁用的 {{HTMLElement("optgroup")}} 时，该元素仍然会被禁用。
  • label
    • : 该属性是用于指示此选项含义的标签文本。如果未定义 label 属性，其值将取自元素的文本内容。
  • selected
    • : 如果存在，该布尔属性表示此选项在初始时被选中。如果该 <option> 元素属于一个未设置 multiple 属性的 {{HTMLElement("select")}} 元素，则在该 {{HTMLElement("select")}} 中只能有一个 <option> 具有 selected 属性。
  • value
    • : 该属性的内容表示当此选项被选中时，随表单一起提交的值。如果省略该属性，其值将取自该 option 元素的文本内容。

使用 CSS 进行样式设置

对 <option> 元素的样式定制在历史上一直非常受限。可自定义的 select 元素介绍了能够对其进行完整自定义的新特性，使其像任何常规 DOM 元素一样可被样式化。

旧版 option 样式

在不支持现代自定义功能的浏览器中（或在无法使用这些功能的旧代码库中），<option> 元素可用的样式取决于浏览器和操作系统。根据不同的操作系统，Firefox 和 Chromium 会遵循所属 <select> 的 {{cssxref("font-size")}}。Chromium 可能还允许设置 {{cssxref("color")}}、{{cssxref("background-color")}}、{{cssxref("font-family")}}、{{cssxref("font-variant")}} 和 {{cssxref("text-align")}}。

关于旧版 <option> 样式的更多细节，请参阅我们的高级表单样式指南。

示例

示例请参见 {{HTMLElement("select")}}。

技术概要

内容分类 无。
允许的内容 在传统的 <select> 元素中，只允许文本内容，可能包含转义字符（例如 &eacute;）。在可自定义的 select 元素中，<option> 元素可以包含任意内容。
标签省略 开始标签是必需的。如果该元素后面紧跟另一个 <option> 元素或一个 {{HTMLElement("optgroup")}}，或者父元素中没有更多内容，则结束标签是可选的。
允许的父元素 {{HTMLElement("select")}}、{{HTMLElement("optgroup")}} 或 {{HTMLElement("datalist")}} 元素。
隐式 ARIA 角色 option
允许的 ARIA 角色 没有允许的 role
DOM 接口 HTMLOptionElement