SVG innen OPTION Element

Question

Ich schaffe die folgende svg Element und der Struktur:

<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> 

, die eine Reihe von kleinen Quadraten erzeugt. Genau wie folgt aus:

Bis jetzt ist alles in Ordnung.

Dann stelle ich den obigen Code innerhalb einer option für die select Drop-down, wie unten dargestellt:

<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> 

nun der Inhalt der option als weißes leer angezeigt wird, wie unten im Bild gezeigt :

Wie Sie sehen können, wird der Inhalt des Bildes ist leer. Wenn ich jedoch den Debugging-Inspector ausführe, kann ich dort immer noch das Element svg erkennen.

Was mache ich falsch? Wie kann ich eine svg innerhalb einer Option anzeigen? Vielen Dank.

Answer 1

HTML <option> Elemente können nur Nur-Text enthalten.

Was Sie gerade laufen, ist die langwierige Diskussion "Wie man ein <select> Element style". Die Beschreibung all der möglichen Hacks und Lösungen, die im Laufe der Jahre vorgeschlagen wurden, geht hier weit über den Rahmen einer Antwort hinaus und wäre rein auf der Meinung der Befragten. Schauen Sie sich nach

• CSS-Hacks, die versuchen, die OS-bereitgestellt Styling
• UI-Module für Javascript-Bibliotheken außer Kraft zu setzen, die das Verhalten von <select> mit anderen Elementen
• Web Components

emulieren und machen mach dir deine eigenen Gedanken.