SVG内のOPTION要素

Question

私は、次のsvg要素と構造体作成しています：

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

小さな正方形の列を生成します。ただ、このように：

これまでのところ、すべてがOKです。

以下に示すように、私は、selectドロップダウンためoption内部に上記のコードを配置：

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

下図に示すように、今optionの内容は、白抜きとして表示されます：あなたが見ることができるように

、画像の内容は空です。しかし、私がデバッグインスペクタを実行しても、そこにはsvgという要素が検出されます。

私は間違っていますか？オプションの中にsvgを表示するにはどうすればよいですか？ありがとう。

Answer 1

HTML <option>要素にはプレーンテキストしか含めることができません。

実行しているのは、長時間実行する「<select>要素をスタイルする方法」です。何年もの間提案されている可能性のあるハックと解決策をすべて説明することは、ここでの答えの範囲をはるかに超えており、純粋に意見に基づくものです。他の要素と<select>の動作をエミュレート

Webコンポーネント

と作るJavaScriptライブラリのためのOSが提供するスタイリング

UIモジュールを上書きしようと

• CSSハックのために見て回りますあなた自身の心をアップする。