<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 元素