选项元素内的 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>

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

到目前为止一切正常。

然后我将上面的代码放在 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> 元素只能包含纯文本。

您运行感兴趣的是长期运行 "How to style a <select> element" 的讨论。描述多年来提出的所有可能的黑客攻击和解决方案远远超出了这里的答案范围，并且纯粹是基于意见的。四处寻找

CSS 黑客试图覆盖 OS 提供的样式
UI Javascript 库的模块，这些模块模拟 <select> 与其他元素的行为
网络组件

然后自己拿定主意。

选项元素内的 SVG

SVG inside OPTION element

html

select

svg

option