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

概要

カテゴリー

配置できる場所

上記カテゴリーの要素が置ける場所。

内容モデル

ドロップダウンボックスの場合に限り、1個以下のbutton要素。
上記に続いて、0個以上のoption要素、optgroup要素、hr要素、div要素、noscript要素、又はScript-supporting contentに属する要素。

下記の条件をすべて満たす場合は、選択肢セットの中にプレースホルダーラベルオプションを含まなければならない。
- required属性が指定されている。
- multiple属性が指定されていないドロップダウンボックスである。
補足：プレースホルダーラベルオプションとは、下記の条件をすべて満たすoption要素である。
- 祖先要素にoptgroup要素がない。
- select要素による選択肢セットの中の最初の選択肢である。
- 当該option要素の送信値が空文字列である。

属性

グローバル属性
name→送信用名前文字列。選択されたoption要素の送信値とセットでフォーム送信される。属性値にisindexを指定してはならない。
autocomplete→on、off、その他。属性未指定の場合のデフォルトは、所属フォームの設定値、それがない場合は、on。自動補完機能の設定。
disabled→ブーリアン属性。指定されたフォームコントロールは無効となる（操作できなくなり、送信値はフォーム送信されない）。この状態は、スクリプトを用いないと解除できない。
form→同一HTML文書内にあるform要素のid属性値。所属フォームを指定する。
multiple→ブーリアン属性。複数の選択肢を選択可能とする場合に指定。
required→ブーリアン属性。その項目の入力が必須の場合に指定。
size→0を除く非負整数。表示する選択肢数を指定。属性未指定の場合又は非妥当属性値の場合のデフォルトは、multiple属性がある場合は4、そうでなければ1。1の場合は通常はドロップダウンボックスになる。

HTML構文におけるタグの省略

省略不可。

WAI-ARIA

ドロップダウンボックスの場合は、
- デフォルトroleは、combobox。デフォルトroleをrole属性値に指定することは、推奨されない。
- デフォルトrole以外では、menuを指定可。
そうでない場合は、
- デフォルトroleは、listbox。デフォルトroleをrole属性値に指定することは、推奨されない。
- デフォルトrole以外のroleは、指定不可。
disabled属性が指定されている場合は、aria-disabled属性を指定すべきではない。
disabled属性が指定されている場合は、aria-disabled属性値にfalseを指定してはならない。
required属性が指定されている場合は、aria-required属性を指定すべきではない。
required属性が指定されている場合は、aria-required属性値にfalseを指定してはならない。
aria-multiselectable属性を指定すべきではない。

視覚系ブラウザのデフォルトとして期待されるCSS


  select {
    text-transform: initial;
    text-indent: initial;
    text-shadow: initial;
    text-align: initial;
    box-sizing: border-box;
    appearance: auto;
  }
  select:autofill {field-sizing: fixed !important;}

{appearance: base-select;}が適用されてない場合は、下記を適用。


  select {
    letter-spacing: initial;
    word-spacing: initial;
    line-height: initial;
  }

{appearance: base-select;}が適用されてないドロップダウンボックスの場合は、下記を適用。


  select {display: inline-block;}

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


  select {
    background-color: transparent;
    border: 1px solid currentColor;
    user-select: none;
    box-sizing: border-box;
  }

{appearance: base-select;}が有効に適用されて表示されるドロップダウンボックスの場合は、下記を適用。


  select {
    border-radius: 0.5em;
    padding-block: 0.25em;
    padding-inline: 0.5em;
    min-block-size: calc-size(auto, max(size, 24px, 1lh));
    min-inline-size: calc-size(auto, max(size, 24px));
    display: inline-flex;
    gap: 0.5em;
    border-radius: 0.5em;
    field-sizing: content !important;
  }

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

  ::picker(select) {
    box-sizing: border-box;
    border: 1px solid;
    padding: 0;
    color: CanvasText;
    background-color: Canvas;
    margin: 0;
    inset: auto;
    min-inline-size: anchor-size(self-inline);
    max-block-size: stretch;
    overflow: auto;
    position-area: self-block-end span-self-inline-end;  /*暗黙のアンカー要素は、select要素自身である。*/
    position-try-order: most-block-size;
    position-try-fallbacks:
      self-block-start span-self-inline-end,
      self-block-end span-self-inline-start,
      self-block-start span-self-inline-start;
  }

  select::picker-icon {
    content: counter(fake-counter-name, disclosure-open);
    display: block;
    margin-inline-start: auto;
  }

{appearance: base-select;}が有効に適用されて表示されるリストボックスの場合は、下記を適用。


  select {
    overflow: auto;
    display: inline-block;
    block-size: calc(max(24px, 1lh) * attr(size type(<integer>), 4));
  }

視覚系ブラウザにおいて期待されるレンダリング

field-sizingプロパティの適用が期待される。
size属性値が1より大きい場合（デフォルト値でそうなった場合を含む）は、リストボックスとなる。
size属性値が1（デフォルト値で1となった場合を含む）の場合は、ドロップダウンボックスとなる。ただし、multiple属性が指定されている場合は、リストボックスとなるかドロップダウンボックスとなるかは、ユーザーエージェントの実装による。
リストボックスは、inline-blockボックスとして表示。
リストボックスの場合は、幅はすべての選択肢のラベル（選択肢グループがある場合はグループのラベルも含む）のうちの最大文字幅（字下げ分も含む）を表示するにたる分に加えてスクロールバーの幅分。
リストボックスの場合、その高さは
- field-sizingプロパティの計算値がcontentの場合は、すべての選択肢を表示できる行数分。
- size属性がない場合及びsize属性値が非妥当値の場合は、４行分。
- 前二項以外の場合は、size属性値で指定された行数分。
ドロップダウンボックスの場合は、ドロップダウンボタンを含むドロップダウンボックスとなる。
ドロップダウンボックスの場合において、当該select要素の最初の子がbutton要素である場合は、当該button要素が、ドロップダウンボタンに割り当てられる。
ドロップダウンボックスの場合、その表示幅は
- field-sizingプロパティの計算値がcontentの場合は、選択された選択肢のラベルの文字幅。
- 前項以外の場合は、すべての選択肢のラベル（選択肢グループがある場合はグループのラベルも含む）のうち最大文字幅（字下げ分も含む）。
- multiple属性が指定されている場合は、前項の最大文字幅の算定においては、ユーザーエージェントの実装により独自に追加されるラベルテキストも対象に含めて算定する。
各選択肢及び各選択肢グループにおいては、option要素、optgroup要素のラベルを表示する。
optgroup要素のラベルは、
- その子要素たるlegend要素がある場合は、当該legend要素の内容（＊未対応ブラウザの場合は、削除されてしまうため、次項を適用）。
- 上記以外の場合は、label属性値。
option要素のラベルは、
- label属性が指定されている場合は、その属性値。
- label属性が指定されてない場合は、
  - select要素に{appearance: base-select;}が有効に適用されて表示される場合は、当該option要素の内容。
  - select要素に{appearance: base-select;}が適用されてない場合は、当該option要素の内容テキスト。
プレースホルダーラベルオプションは、それが有効な選択肢ではないこと、及びそれがselect要素の単なるラベルであることを伝えるような方法で表示し、ユーザーの操作によっては選択できなくする。
optgroup要素がある場合は、その内容であるoption要素のラベルは、当該optgroup要素のラベルの下に字下げして表示する。
select要素の内容として一つ以上の連続したhr要素がある場合は、単一の区切りとして表示されてもよい。

制約検証

原則として、制約検証の対象。
disabled属性があれば、制約検証の対象から除外。
required属性があれば、必須の入力がなされてるかどうかチェック。この場合、プレースホルダーラベルオプションのみが選択されている場合は、必須の入力がされているとはみなされない。

ユーザーエージェントに対する特記事項

ユーザーがその選択にしたがってautocomplete属性による設定を無視することができるようにすることができる。

意味・用法: 選択肢のセットの中から選択させるためのフォームコントロールを表す。

アクセシビリティ関連

autocomplete属性値のその他は、ユーザーエージェントが入力目的を機械的に特定するためにも有用である（Techniques for WCAG 2.1 : H98）。

私見・補足

プレースホルダーラベルオプションの趣旨は充分に理解できるけど、選択肢の一つが完全に「無」というのは気味が悪い。

{appearance: base-select;}が適用されない場合（及び、適用していても無効・未対応の場合）は、select要素の内容は、「optgroup要素、option要素、legend要素、hr要素」以外の要素のタグがすべて削除されたような状態で、レンダリングされる（未対応の場合は、さらにlegend要素のタグも削除される）。さらに、その結果として、select要素やoptgroup要素の子として配置されたような状態になったテキストは、削除されてしまってレンダリングされない。特に、label属性なしのoption要素は、内容テキストだけがそのまま表示されることに注意。

表示確認

ソース１


  <label>select要素→
  <select>
    <option selected="selected">optionその１</option>
    <optgroup label="optgroupその１">
      <option>optionその２</option>
      <option>optionその３</option>
      <option label="optionその４" value="op4"></option>
    </optgroup>
  </select>
  </label>

表示結果１

select要素→

ソース２


  <label>select要素→
  <select multiple="multiple">
    <option selected="selected" label="optionその１" value="op1"></option>
    <option label="optionその２" value="op2"></option>
    <optgroup label="optgroupその１">
      <option label="optionその３" value="op3"></option>
      <option label="optionその４" value="op4"></option>
      <option>optionその５</option>
    </optgroup>
  </select>
  </label>

表示結果２

select要素→

ソース３：disabled属性の指定


  <label>select要素１→
  <select>
    <optgroup label="optgroupその１">
      <option selected="selected">optionその１</option>
      <option disabled="disabled">optionその２</option>
      <option>optionその３</option>
    </optgroup>
    <optgroup label="optgroupその２" disabled="disabled">
      <option>optionその４</option>
      <option>optionその５</option>
      <option>optionその６</option>
    </optgroup>
  </select>
  </label>
  <label>select要素２→
  <select disabled="disabled">
    <option selected="selected">optionその１</option>
    <option>optionその２</option>
    <option>optionその３</option>
  </select>
  </label>
  <label>select要素３→
  <select multiple="multiple">
    <optgroup label="optgroupその１">
      <option selected="selected">optionその１</option>
      <option disabled="disabled">optionその２</option>
      <option>optionその３</option>
    </optgroup>
    <optgroup label="optgroupその２" disabled="disabled">
      <option>optionその４</option>
      <option>optionその５</option>
      <option>optionその６</option>
    </optgroup>
  </select>
  </label>
  <label>select要素４→
  <select multiple="multiple" disabled="disabled">
    <option selected="selected">optionその１</option>
    <option>optionその２</option>
    <option>optionその３</option>
  </select>
  </label>

表示結果３

select要素１→ select要素２→ select要素３→ select要素４→

ソース４：プレースホルダーラベルオプションあり


  <label>select要素→
  <select required="required">
    <option selected="selected" value="">--↓以下から選択してください。--</option>
    <option>optionその１</option>
    <option>optionその２</option>
    <option>optionその３</option>
    <option>optionその４</option>
  </select>
  </label>

表示結果４

select要素→

ソース５：ドロップダウンボックスへの{appearance: base-select;}の適用の有無による差異


  <style> /* このstyle要素部分は実際にはhead要素内に設置する。 */
  select.base,
  .base::picker(select) {
    appearance: base-select;
  }
  </style>

  <label>適用→
  <select class="base">
    <option selected="selected">optionその１</option>
    <optgroup label="optgroupその１">
      <option>optionその２</option>
      <option>optionその３</option>
      <option>optionその４</option>
    </optgroup>
  </select>
  </label>

  <label>不適用→
  <select>
    <option selected="selected">optionその１</option>
    <optgroup label="optgroupその１">
      <option>optionその２</option>
      <option>optionその３</option>
      <option>optionその４</option>
    </optgroup>
  </select>
  </label>

表示結果５

適用→ 不適用→

未対応ブラウザでは、両者の表示に差は出ないはず。

ソース６：ドロップダウンボックスに{appearance: base-select;}を適用して、いろいろと装飾をほどこした用例（旧式のブラウザでは対応してない）


  <style> /* このstyle要素部分は実際にはhead要素内に設置する。 */
  select.base,
  .base::picker(select) {
    appearance: base-select;
  }
  </style>

  <label for="select6">select要素→</label>
  <select id="select6" class="base">
    <button><b>選択中→</b><selectedcontent style="text-decoration:underline"></selectedcontent></button>
    <div style="background-color:lime">
      <option selected="selected" value="2の2乗"><span><span style="color:red">2</span><sup style="color:blue">2</sup></span></option>
      <hr />
      <option value="酸素"><span><span style="color:blue">O</span><sub style="color:red">2</sub></span></option>
      <hr />
      <hr />
      <div style="border:solid">
        <optgroup>
          <legend style="background-color:yellow">性別</legend>
          <div style="border:dashed gray"><option value="男性"><span style="font-weight:bold; background-color:blue">男性</span>、<del>女性</del></option></div>
          <div style="border:dashed gray"><option value="女性"><del>男性</del>、<span style="font-weight:bold; background-color:red">女性</span></option></div>
        </optgroup>
      </div>
    </div>
    <hr />
    <optgroup label="旅行先">
      <div style="background-color:green">
        <option value="日本"><div style="background-color:red"><div>日本</div><small>→母国</small></div></option>
        <option value="韓国"><div style="background-color:blue">韓国<br /><small>→隣の国</small></div></option>
      </div>
    </optgroup>
  </select>

表示結果６

select要素→

各option要素にvalue属性値を設定しないと、それぞれの送信値が「22」「O2」「男性、女性」「男性、女性」「日本→母国」「韓国→隣の国」となってしまう（内容テキストだけがそのまま送信値となる）。

ソース７：ソース６について{appearance: base-select;}を適用しなかった場合


  <label for="select7">select要素→</label>
  <select id="select7">
    <button><b>選択中→</b><selectedcontent style="text-decoration:underline"></selectedcontent></button>
    <div style="background-color:lime">
      <option selected="selected" value="2の2乗"><span><span style="color:red">2</span><sup style="color:blue">2</sup></span></option>
      <hr />
      <option value="酸素"><span><span style="color:blue">O</span><sub style="color:red">2</sub></span></option>
      <hr />
      <hr />
      <div style="border:solid">
        <optgroup>
          <legend style="background-color:yellow">性別</legend>
          <div style="border:dashed gray"><option value="男性"><span style="font-weight:bold; background-color:blue">男性</span>、<del>女性</del></option></div>
          <div style="border:dashed gray"><option value="女性"><del>男性</del>、<span style="font-weight:bold; background-color:red">女性</span></option></div>
        </optgroup>
      </div>
    </div>
    <hr />
    <optgroup label="旅行先">
      <div style="background-color:green">
        <option value="日本"><div style="background-color:red"><div>日本</div><small>→母国</small></div></option>
        <option value="韓国"><div style="background-color:blue">韓国<br /><small>→隣の国</small></div></option>
      </div>
    </optgroup>
  </select>

表示結果７

select要素→

ソース８：ソース７について、button要素を取り除いたうえで、リストボックスとした場合


  <label for="select8">select要素→</label>
  <select id="select8" multiple="multiple">
    <div style="background-color:lime">
      <option selected="selected" value="2の2乗"><span><span style="color:red">2</span><sup style="color:blue">2</sup></span></option>
      <hr />
      <option value="酸素"><span><span style="color:blue">O</span><sub style="color:red">2</sub></span></option>
      <hr />
      <hr />
      <div style="border:solid">
        <optgroup>
          <legend style="background-color:yellow">性別</legend>
          <div style="border:dashed gray"><option value="男性"><span style="font-weight:bold; background-color:blue">男性</span>、<del>女性</del></option></div>
          <div style="border:dashed gray"><option value="女性"><del>男性</del>、<span style="font-weight:bold; background-color:red">女性</span></option></div>
        </optgroup>
      </div>
    </div>
    <hr />
    <optgroup label="旅行先">
      <div style="background-color:green">
        <option value="日本"><div style="background-color:red"><div>日本</div><small>→母国</small></div></option>
        <option value="韓国"><div style="background-color:blue">韓国<br /><small>→隣の国</small></div></option>
      </div>
    </optgroup>
  </select>

表示結果８

select要素→

ソース９：ソース８について、{appearance: base-select;}を適用した場合


  <style> /* このstyle要素部分は実際にはhead要素内に設置する。 */
  select.base,
  .base::picker(select) {
    appearance: base-select;
  }
  </style>

  <label for="select9">select要素→</label>
  <select id="select9" multiple="multiple" class="base">
    <div style="background-color:lime">
      <option selected="selected" value="2の2乗"><span><span style="color:red">2</span><sup style="color:blue">2</sup></span></option>
      <hr />
      <option value="酸素"><span><span style="color:blue">O</span><sub style="color:red">2</sub></span></option>
      <hr />
      <hr />
      <div style="border:solid">
        <optgroup>
          <legend style="background-color:yellow">性別</legend>
          <div style="border:dashed gray"><option value="男性"><span style="font-weight:bold; background-color:blue">男性</span>、<del>女性</del></option></div>
          <div style="border:dashed gray"><option value="女性"><del>男性</del>、<span style="font-weight:bold; background-color:red">女性</span></option></div>
        </optgroup>
      </div>
    </div>
    <hr />
    <optgroup label="旅行先">
      <div style="background-color:green">
        <option value="日本"><div style="background-color:red"><div>日本</div><small>→母国</small></div></option>
        <option value="韓国"><div style="background-color:blue">韓国<br /><small>→隣の国</small></div></option>
      </div>
    </optgroup>
  </select>

表示結果９

select要素→

ソース１０：複数選択可能なドロップダウンボックスとして表示されることがありうるもの


  <label>select要素→
  <select size="1" multiple="multiple">
    <option selected="selected">optionその１</option>
    <option>optionその２</option>
    <option>optionその３</option>
    <option>optionその４</option>
  </select>
  </label>

表示結果１０

select要素→

ドロップダウンボックスかリストボックスかのいずれで表示されるかは、ユーザーエージェント次第である。