添加span inner <标记并设置样式

Add span inside <option> tag and style it

本文关键字：设置 样式 span inner 添加      更新时间：2023-09-26

我想在<option>标签内的文本之前添加span并样式它(它应该代表选择菜单中的颜色)。然而，它似乎不工作…

如何使这段代码工作?

JsFiddle: http://jsfiddle.net/bartuz/08e0L9j2/2/

上面的例子似乎只适用于Firefox…其他浏览器呢?

这取决于你的浏览器。在最新版本的Firefox中，它可以正常工作。但是，它不能在最新版本的Internet Explorer中工作。

你的问题有点复杂——我怀疑这就是为什么它被否决的原因——你问的是为什么它不能工作，而不是如何让它工作。

它不能工作，因为它不是一个真正支持的选择框的特性(目前!)

我建议你考虑使用JavaScript来实现相同的结果(特别是jQuery UI selectmenu)，它应该支持这种"高级"选择框。

选项元素不允许有子元素。我已经扩展了你同样的答案，但相反，应用背景颜色的选项元素，如演示在这个jsfiddle链接:https://jsfiddle.net/go4zee/6L0jjjoa/

$('#tag_item_color option').each(function () {
    var color = $(this).text();
    console.log(color);
    $(this).closest("option").css({"background-color":color});
})

你不应该指望你的hack可以在Firefox上运行，但这并不意味着它也可以在Chrome上运行。

无论如何，样式选择总是令人沮丧，并且没有简单的方法来定制本地选择元素。

如果你正在寻找一种方式来设置本地选择元素的样式，也许这会有所帮助:
https://catalin.red/making-html-dropdowns-not-suck/

相关文章：