HTML <option> 選択肢要素

試してみましょう

<label for="pet-select">ペットを選んでください:</label>

<select id="pet-select">
  <option value="">--選択肢を 1 つ選んでください--</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> 要素の祖先の <select> 要素に multiple が設定されていない場合、<select> 要素内で selected 属性が設定できる <option> 要素は 1 つだけです。

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