目次に戻る

option要素：HTML Living Standard各要素別メモ

概要

カテゴリー
  • なし。
配置できる場所
内容モデル
属性
  • グローバル属性
  • label→ラベルテキストを指定。指定しない場合は、内容テキストがラベルテキストとなる。
  • value→送信値を指定する。指定しない場合は、内容テキストが送信値となる。
  • disabled→ブーリアン属性。指定されたフォームコントロールは無効となる（選択できなくなる）。この状態は、スクリプトを用いないと解除できない。
  • selected→ブーリアン属性。ウェブページ読み込み時に自動的に選択状態にする場合に指定する。multiple属性が指定されていない同一select要素内のoption要素の中では1個にしか指定できない。
HTML構文におけるタグの省略
  • 終了タグ→一定条件で可。
WAI-ARIA
  • デフォルトroleは、option。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外のroleは、指定不可。
  • disabled属性が指定されている場合は、aria-disabled属性を指定すべきではない。
  • disabled属性が指定されている場合は、aria-disabled属性値にfalseを指定してはならない。
  • aria-selected属性を指定すべきではない。
視覚系ブラウザのデフォルトとして期待されるCSS

  option {display: block;}

select要素に{appearance: base-select;}が有効に適用されて表示される場合は、下記を適用。


  select option {
    min-inline-size: 24px;
    min-block-size: max(24px, 1lh);
    padding-inline: 0.5em;
    padding-block-end: 0;
    display: flex;
    align-items: center;
    gap: 0.5em;
    white-space: nowrap;
  }

  select option:enabled:hover {background-color: color-mix(currentColor 10%, transparent);}
  select option:enabled:active {background-color: color-mix(currentColor 20%, transparent);}
  select option:disabled {color: color-mix(currentColor 50%, transparent);}

  select option::checkmark {content: '\2713' / '';}
  select option:not(:checked)::checkmark {visibility: hidden;}

  select optgroup option {font-weight: normal;}
意味・用法

select要素における選択肢、又は、datalist要素によるサジェストリストにおける選択肢を表す。

私見・補足

ブラウザの実装状況を鑑みると、select要素の子孫であるときは内容テキストを書いておき、datalist要素の子孫であるときは内容テキストは書かない、というのがベターだろうか。

以下、select要素の子孫の場合の補足。

内容にテキスト以外の要素を配置して、かつ、value属性がない場合は、配置された要素の内容テキストだけ（ただし、スクリプトのテキストは含まれず、かつ、img要素のalt属性値は含む）が送信値になるので留意すること。例：「<option>2<sup>2</sup></option>」は、「22」が送信値になる。

opion要素の内容にテキスト以外の要素を配置することに未対応のユーザーエージェントにおいては、配置されたimg要素のalt属性値は、送信値には含まれない。

opion要素の内容にテキスト以外の要素を配置することに未対応の視覚系ブラウザにおいては、label属性がない場合は、配置された要素の内容テキストだけがそのまま表示されることになるので留意すること。select要素に{appearance: base-select;}が適用されてない場合も同様。例：「<option value="2の2乗">2<sup>2</sup></option>」は、それらの場合には、「22」というラベルの選択肢として表示されてしまうことになる。

表示確認

select要素、datalist要素を参照。