<option>：HTML Option 元素

试一试

<label for="pet-select">Choose a pet:</label>

<select id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">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> 元素是 <select> 元素的后代，而该 <select> 元素的 multiple 属性未设置，则该 <select> 元素中最多只能有一个 <option> 元素具有 selected 属性。

value

如果选择了此选项，则此属性的内容代表要提交给表单的值。如果省略此属性，则值将取自选项元素的文本内容。

使用 CSS 样式

历史上，对 <option> 元素的样式设置一直受到很大限制。 可自定义的 select 元素 解释了支持其完全自定义的新功能，就像任何常规 DOM 元素一样。

旧版选项样式

在不支持现代自定义功能（或无法使用旧版代码库）的浏览器中，<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 元素