Élément HTML `<selectedcontent>` : l'élément d'affichage de l'option sélectionnée

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Want more support for this feature? Tell us why.

En savoir plus
Voir la compatibilité complète

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

L'élément HTML <selectedcontent> s'utilise à l'intérieur d'un élément <select> pour afficher le contenu de son <option> actuellement sélectionné dans son premier enfant <button>. Cela permet de mettre en forme toutes les parties d'un élément <select>, appelé « sélecteurs personnalisables ».

Attributs

Cet élément inclut les attributs universels.

Description

Vous utilisez l'élément <selectedcontent> comme seul enfant d'un élément <button>, qui doit être le premier enfant de l'élément <select>. Tout élément <option>, seul autre enfant valide de <select>, doit venir après le <button> et le <selectedcontent> imbriqué.

html

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

Fonctionnement interne de `<selectedcontent>`

L'élément <selectedcontent> contient un clone du contenu de l'élément <option> actuellement sélectionné. Le navigateur affiche ce clone en utilisant cloneNode(). Lorsque l'élément <option> sélectionné change, par exemple lors d'un évènement change, le contenu de <selectedcontent> est remplacé par un clone du nouvel <option> sélectionné. Il est important d'être conscient·e de ce comportement, surtout avec du contenu dynamique.

Attention : Comme le navigateur met à jour <selectedcontent> uniquement lorsque l'élément <option> sélectionné change, toute modification dynamique du contenu de l'élément <option> sélectionné après le rendu du <select> ne sera pas clonée dans <selectedcontent>. Vous devrez mettre à jour <selectedcontent> manuellement. Faites attention si vous utilisez l'un des frameworks JavaScript populaires où les éléments <option> sont mis à jour dynamiquement après le rendu initial — le résultat peut ne pas correspondre à ce que vous attendez dans <selectedcontent>.

Inertie de `<selectedcontent>`

Par défaut, tout <button> à l'intérieur d'un élément <select> est inerte. Par conséquent, tout le contenu de ce bouton — y compris <selectedcontent> — est aussi inerte. Cela signifie que les utilisateur·ice·s ne peuvent pas interagir avec ou sélectionner le contenu de <selectedcontent>.

Mise en forme du contenu de l'option sélectionnée avec CSS

Vous pouvez cibler le contenu de l'élément <option> actuellement sélectionné et définir sa présentation dans le bouton du sélecteur. La mise en forme du bouton n'affecte pas la mise en forme du contenu de l'élément <option> cloné. Cela vous permet de personnaliser l'apparence de l'option sélectionnée dans le bouton, indépendamment de son apparence dans la liste déroulante.

Par exemple, vos éléments <option> peuvent contenir des icônes, des images ou même des vidéos qui s'affichent correctement dans la liste déroulante, mais qui pourraient faire augmenter la taille du <button> du sélecteur, le rendre désordonné et affecter la présentation environnante. En ciblant le contenu à l'intérieur de <selectedcontent>, vous pouvez masquer des éléments comme des images dans le bouton, sans affecter leur affichage dans la liste déroulante, comme le montre l'extrait suivant :

css

selectedcontent img {
  display: none;
}

Note : Si les éléments <button> et/ou <selectedcontent> ne sont pas inclus dans <select>, le navigateur crée un <button> implicite pour afficher le contenu de l'élément <option> sélectionné. Ce bouton de secours ne peut pas être ciblé avec CSS via les sélecteurs de type button ou selectedcontent.

Exemples

Vous pouvez consulter un exemple complet incluant l'élément <selectedcontent> dans notre guide Sélecteurs personnalisables.

Résumé technique

Catégories de contenu	Aucune.
Contenu autorisé	Reflète le contenu de l'élément `<option>` sélectionné.
Omission de balise	Aucune, les balises ouvrante et fermante sont obligatoires.
Parents autorisés	Un élément `<button>` qui est le premier enfant d'un élément `<select>`.
Rôle ARIA implicite	Pas de rôle correspondant
Rôles ARIA autorisés	Aucun `role` autorisé
Interface DOM	`HTMLSelectedContentElement`