<option>：HTML 选项元素

尝试一下

<label for="pet-select">选择一只宠物：</label
><select id="pet-select">
  <option value="">--请选择一个选项--</option>
  <option value="dog">狗</option>
  <option value="cat">猫</option>
  <option value="hamster">仓鼠</option>
  <option value="parrot">鹦鹉</option>
  <option value="spider">蜘蛛</option>
  <option value="goldfish">金鱼</option>
</select>

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

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

属性

该元素包含全局属性。

disabled

如果设置了这个布尔属性，则该选项不可被选中。浏览器通常会将这样的控件显示为灰色，并且不会接收任何浏览事件，例如鼠标点击或与焦点相关的事件。如果未设置该属性，当某个父元素是被禁用的 <optgroup> 时，该元素仍然会被禁用。

label

该属性是用于指示此选项含义的标签文本。如果未定义 label 属性，其值将取自元素的文本内容。

selected

如果存在，该布尔属性表示此选项在初始时被选中。如果该 <option> 元素属于一个未设置 multiple 属性的 <select> 元素，则在该 <select> 中只能有一个 <option> 具有 selected 属性。

value

该属性的内容表示当此选项被选中时，随表单一起提交的值。如果省略该属性，其值将取自该 option 元素的文本内容。

使用 CSS 进行样式设置

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

旧版 option 样式

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

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

示例

示例请参见 <select>。

技术概要

规范

浏览器兼容性

参见

• 其他与表单相关的元素：<form>、<legend>、<label>、<button>、<select>、<datalist>、<optgroup>、<fieldset>、<textarea>、<input>、<output>、<progress> 和 <meter>。
• 可自定义的 select 元素