html – OPTION元素中的SVG

我正在创建以下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>

这会产生一排小方块.像这样：

到目前为止一切都还可以.

然后我将上面的代码放在选择下拉列表的选项中,如下所示：

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

现在,该选项的内容显示为白色空白,如下图所示：

如您所见,图像的内容为空.但是,如果我运行调试检查器,我仍然可以检测到那里的svg元素.

我究竟做错了什么？如何在选项中显示svg？谢谢.

解决方法

HTML< option>元素只能包含纯文本.

您遇到的是长期运行的“如何设置< select>元素的样式”讨论.描述这些年来提出的所有可能的黑客和解决方案远远超出了答案的范围,并且纯粹是基于意见的.环顾四周

> CSS黑客试图覆盖操作系统提供的样式
>用于模拟< select>行为的Javascript库的UI模块与其他元素
> Web组件

并自己决定.