title: SVG inside OPTION element
body: <p>I am creating the following <code>svg</code> element and structure:</p>
  
  <pre><code>&lt;svg width="135" height="15"&gt;
      &lt;rect width="15" height="15" fill="#ffffe5" x="0" y="0"&gt;&lt;/rect&gt;
      &lt;rect width="15" height="15" fill="#f7fcb9" x="15" y="0"&gt;&lt;/rect&gt;
      &lt;rect width="15" height="15" fill="#d9f0a3" x="30" y="0"&gt;&lt;/rect&gt;
      &lt;rect width="15" height="15" fill="#addd8e" x="45" y="0"&gt;&lt;/rect&gt;
      &lt;rect width="15" height="15" fill="#78c679" x="60" y="0"&gt;&lt;/rect&gt;
      &lt;rect width="15" height="15" fill="#41ab5d" x="75" y="0"&gt;&lt;/rect&gt;
      &lt;rect width="15" height="15" fill="#238443" x="90" y="0"&gt;&lt;/rect&gt;
      &lt;rect width="15" height="15" fill="#006837" x="105" y="0"&gt;&lt;/rect&gt;
      &lt;rect width="15" height="15" fill="#004529" x="120" y="0"&gt;&lt;/rect&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Which produces a row of little squares. Just like this:</p>
  
  <p><a href="https://i.stack.imgur.com/ZrEFL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZrEFL.png" alt="enter image description here"></a></p>
  
  <p>So far everything is OK.</p>
  
  <p>Then I place the code above inside an <code>option</code> for the <code>select</code> drop-down, as shown below:</p>
  
  <pre><code>&lt;select id="data-color-scheme"&gt;
      &lt;option id="YlGn"&gt;
          &lt;div&gt;
              &lt;svg width="135" height="15"&gt;
                  &lt;rect width="15" height="15" fill="#ffffe5" x="0" y="0"&gt;&lt;/rect&gt;
                  &lt;rect width="15" height="15" fill="#f7fcb9" x="15" y="0"&gt;&lt;/rect&gt;
                  &lt;rect width="15" height="15" fill="#d9f0a3" x="30" y="0"&gt;&lt;/rect&gt;
                  &lt;rect width="15" height="15" fill="#addd8e" x="45" y="0"&gt;&lt;/rect&gt;
                  &lt;rect width="15" height="15" fill="#78c679" x="60" y="0"&gt;&lt;/rect&gt;
                  &lt;rect width="15" height="15" fill="#41ab5d" x="75" y="0"&gt;&lt;/rect&gt;
                  &lt;rect width="15" height="15" fill="#238443" x="90" y="0"&gt;&lt;/rect&gt;
                  &lt;rect width="15" height="15" fill="#006837" x="105" y="0"&gt;&lt;/rect&gt;
                  &lt;rect width="15" height="15" fill="#004529" x="120" y="0"&gt;&lt;/rect&gt;
              &lt;/svg&gt;
          &lt;/div&gt;
      &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Now the content of the <code>option</code> is displayed as a white blank, as shown in the image below:</p>
  
  <p><a href="https://i.stack.imgur.com/rUYFs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rUYFs.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the content of the image is empty. However, if I run the debugging inspector, I can still detect the <code>svg</code> element there. </p>
  
  <p>What am I doing wrong? How can I display an <code>svg</code> inside an option? Thanks.</p>