Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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 ».
Cet élément inclut les attributs universels.
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é.
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>.
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>.
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 :
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.
Vous pouvez consulter un exemple complet incluant l'élément <selectedcontent> dans notre guide Sélecteurs personnalisables.
| Aucune. |
| Reflète le contenu de l'élément <option> sélectionné. |
| Aucune, les balises ouvrante et fermante sont obligatoires. |
| Un élément <button> qui est le premier enfant d'un élément <select>. |
| Pas de rôle correspondant |
| Aucun role autorisé |
| HTMLSelectedContentElement |
| HTML # the-selectedcontent-element |
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Cette page a été modifiée le 25 avr. 2026 par les contributeur·ice·s du MDN.
Votre modèle pour un internet meilleur.
Visitez la société mère à but non lucratif de Mozilla Corporation, la Fondation Mozilla.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.