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

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

<selectedcontent> HTML は、<select> 要素内で使用され、現在選択されている <option> のコンテンツを、その最初のまず子要素である <button> 内に表示させます。これにより、 <select> 要素のすべての部分をスタイル設定することができるようになり、これを「カスタマイズ可能な選択リスト」と呼びます。

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

html

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

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

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

警告: ブラウザーは選択された <option> が変更された場合にのみ <selectedcontent> を更新するため、選択された <option> のコンテンツを <select> のレンダリング後に動的に変更しても、その変更は <selectedcontent> に複製されません。 <selectedcontent> を手動で更新する必要があります。初期レンダリング後に <option> 要素が動的に更新される一般的なフロントエンド JavaScript フレームワークを使用している場合は、 <selectedcontent> の結果が期待通りにならないことがあるため、注意が必要です。

`<selectedcontent>` の不活性

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

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

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

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

css

selectedcontent img {
 display: none;
}

メモ: <select> 内に <button> 要素や <selectedcontent> 要素が含まれていない場合、ブラウザーは暗黙的に <button> を作成し、選択された <option> のコンテンツを表示します。この代替ボタンは、 CSS の button や selectedcontent の要素型セレクターでは対象にできません。

例

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

技術的概要

コンテンツカテゴリー	なし
許可されている内容	選択されている `<option>` から内容を反映
タグの省略	なし。開始タグと終了タグの両方が必須です。
許可されている親要素	`<select>` 要素の最初の子である `<button>` 要素。
暗黙の ARIA ロール	なし
許可されている ARIA ロール	なし
DOM インターフェイス	`HTMLSelectedContentElement`