<option> はHTML の要素で、<select>、<optgroup>、<datalist> の各要素内で選択肢を定義するために使われます。したがって、<option> は HTML 文書でポップアップメニューのメニュー選択肢や、その他の選択肢の一覧を表すことができます。

試してみましょう

<label for="pet-select">ペットを選んでください:</label><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 要素