SVG intérieur de l'élément OPTION

Question

Je crée l'élément et la structure svg suivante:

<svg width="135" height="15"> 
    <rect width="15" height="15" fill="#ffffe5" x="0" y="0"></rect> 
    <rect width="15" height="15" fill="#f7fcb9" x="15" y="0"></rect> 
    <rect width="15" height="15" fill="#d9f0a3" x="30" y="0"></rect> 
    <rect width="15" height="15" fill="#addd8e" x="45" y="0"></rect> 
    <rect width="15" height="15" fill="#78c679" x="60" y="0"></rect> 
    <rect width="15" height="15" fill="#41ab5d" x="75" y="0"></rect> 
    <rect width="15" height="15" fill="#238443" x="90" y="0"></rect> 
    <rect width="15" height="15" fill="#006837" x="105" y="0"></rect> 
    <rect width="15" height="15" fill="#004529" x="120" y="0"></rect> 
</svg> 

qui produit une rangée de petits carrés. Tout comme ceci:

Jusqu'à présent, tout est OK.

Puis-je placer le code ci-dessus dans un option pour le menu déroulant select, comme indiqué ci-dessous:

<select id="data-color-scheme"> 
    <option id="YlGn"> 
     <div> 
      <svg width="135" height="15"> 
       <rect width="15" height="15" fill="#ffffe5" x="0" y="0"></rect> 
       <rect width="15" height="15" fill="#f7fcb9" x="15" y="0"></rect> 
       <rect width="15" height="15" fill="#d9f0a3" x="30" y="0"></rect> 
       <rect width="15" height="15" fill="#addd8e" x="45" y="0"></rect> 
       <rect width="15" height="15" fill="#78c679" x="60" y="0"></rect> 
       <rect width="15" height="15" fill="#41ab5d" x="75" y="0"></rect> 
       <rect width="15" height="15" fill="#238443" x="90" y="0"></rect> 
       <rect width="15" height="15" fill="#006837" x="105" y="0"></rect> 
       <rect width="15" height="15" fill="#004529" x="120" y="0"></rect> 
      </svg> 
     </div> 
    </option> 
</select> 

Maintenant, le contenu du option est affiché comme blanc blanc, comme le montre l'image ci-dessous :

Comme vous pouvez le voir, le contenu de l'image est vide. Cependant, si j'exécute l'inspecteur de débogage, je peux toujours y détecter l'élément svg.

Qu'est-ce que je fais mal? Comment puis-je afficher un svg dans une option? Merci.

Answer 1

HTML <option> Les éléments ne peuvent contenir que du texte brut.

Ce que vous rencontrez, c'est la discussion de longue date "Comment créer un élément <select>". Décrire tous les hacks et solutions possibles proposés au fil des années va bien au-delà de la portée d'une réponse et serait purement basé sur l'opinion. Regardez autour de vous pour

• hacks CSS qui tentent de remplacer les modules d'interface utilisateur style
• fourni OS-pour les bibliothèques Javascript qui émulent le comportement des <select> avec d'autres éléments
• Composants Web

et font votre propre esprit.