<selectedcontent> : l'élément d'affichage de l'option sélectionnée
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
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é.
<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 utilisateurs 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 :
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 |
Spécifications
| Specification |
|---|
| HTML # the-selectedcontent-element |
Compatibilité des navigateurs
Voir aussi
- L'élément
<select> - L'élément
<option> - L'élément
<optgroup> - Sélecteurs personnalisables