<selectedcontent>: 選択中選択肢表示要素

属性

この要素にはグローバル属性があります。

解説

<selectedcontent> 要素は、 <button> 要素の唯一の子要素として使用されます。この <button> 要素は、 <select> 要素の最初の子要素でなければなりません。 <select> 要素の他の有効な子要素である <option> 要素は、 <button> 要素と入れ子になった <selectedcontent> ペアの後方に配置する必要があります。

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option></option>
  ...
</select>

<selectedcontent> は内部でどのように動作するのか

<selectedcontent> 要素には、現在選択されている <option> のコンテンツの複製が含まれています。 ブラウザーは cloneNode() を使用してこの複製をレンダリングします。選択された <option> が変更された場合（例えば change イベント発生時）、 <selectedcontent> のコンテンツは新たに選択された <option> の複製に置き換えます。この動作を理解することは、特に動的コンテンツと一緒に作業する際に重要です。

<selectedcontent> の不活性

既定では、 <select> 要素内の <button> はすべて不活性です。その結果、そのボタン内のすべてのコンテンツ（<selectedcontent> を含む）も不活性となります。 これは、ユーザーが <selectedcontent> 内のコンテンツを操作したりフォーカスしたりできないということです。

選択されたオプションのコンテンツを CSS でスタイル設定する

現在選択されている <option> 要素のコンテンツを対象に、選択ボタン内での現れる方法をスタイル設定できます。ボタン自体のスタイル設定は、複製された <option> 要素のコンテンツのスタイルには影響しません。これにより、ドロップダウンリストでの表示とは別に、選択されたオプションがボタン内でどのように現れるかを独自にカスタマイズできます。

例えば、 <option> 要素にはアイコンや画像、さらには動画が含まれている場合があります。これらはドロップダウン内で美しく表示されますが、選択の <button> のサイズを大きくしたり、見た目を乱雑にしたり、周囲のレイアウトに影響を与える可能性があります。 <selectedcontent> 内のコンテンツを対象とすることで、ボタン内の画像などの要素を非表示にできます。これにより、ドロップダウン内での表示方法に影響を与えることなく、次のスニペットに示すように調整が可能です。

selectedcontent img {
  display: none;
}

例

<selectedcontent> 要素を含む完全な例は、カスタマイズ可能な select 要素ガイドで参照できます。

技術的概要

仕様書

ブラウザーの互換性

関連情報

• <select> 要素
• <option> 要素
• <optgroup> 要素
• カスタマイズ可能な select 要素