HTML / 要素

selectedcontent要素の使い方

HTMLのselectedcontent要素は、選択メニューで選ばれている項目の内容を、メニューのボタンにも表示するための要素です。たとえば、選択肢の中に名前と小さな説明があるとき、選んだ項目を閉じたメニューにも同じように表示できます。

先に結論

selectedcontentは、対応するselectの先頭にあるbuttonの中に置きます。タグの中は空のままにします。ブラウザーが、現在選ばれているoptionの中身をコピーして表示します。

この仕組みは1つだけ選ぶメニュー向けです。選んだ値をフォームへ送る役目は、引き続きselectとoptionが持ちます。

最小の例

<label for="plan">プラン</label>
<select id="plan" name="plan" class="plan-select">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <div>
    <option value="basic">
      <span>ベーシック</span>
    </option>
    <option value="pro" selected>
      <span>プロ</span>
      <small>おすすめ</small>
    </option>
  </div>
</select>

ページを開くと「プロ」と「おすすめ」が選ばれた項目として表示されます。選択肢とボタンに別々の文を用意しなくても、選んだoptionの中身がボタンに反映されます。

選んだ項目の中身をコピーする

ブラウザーは選ばれたoptionの子要素をselectedcontentへコピーします。元のoptionは選択肢の一覧に残ります。コピーされるのは中身であり、optionのvalueではありません。

optionにlabel属性を付けた場合、その属性の文字はselectedcontentにはコピーされません。表示する内容はoptionの中に書き、フォームで送る値はvalueに書くと役割を分けやすくなります。

見た目を変える

selectedcontentを使うと、選んだ項目の中にある文字や飾りをボタン側でも整えられます。ブラウザーによって対応状況が異なるため、使うブラウザーで表示と操作を確認してください。

@supports (appearance: base-select) {
  .plan-select,
  .plan-select::picker(select) {
    appearance: base-select;
  }
}

このCSSは対応しているブラウザーで選択メニューの見た目を調整するための入口です。CSSを使わなくてもselect自体の選択と送信の役目は変わりません。

よくある間違い

selectedcontentの中に表示したい文を書く。表示内容は選ばれたoptionからコピーされます。
selectedcontentがフォームの値を送ると思う。フォーム値は選ばれたoptionのvalueから決まります。
multipleを付けたselectでも使えると思う。複数選択の内容をこの方法で表示する仕組みではありません。
対応状況を確かめずに公開する。使うブラウザーで選択、表示、キーボード操作を確認しましょう。