选项元素内的 SVG

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>

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

到目前为止一切正常。

然后我将上面的代码放在option 的select 下拉列表中，如下所示：

<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> 元素的样式”讨论。描述多年来提出的所有可能的黑客和解决方案远远超出了这里的答案范围，并且纯粹是基于意见的。环顾四周

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

自己决定吧。