Question

我想在<option>标记内的文本之前添加span并设置样式（它应该代表选择菜单中的颜色）。但它似乎没有用......

如何使这段代码正常工作？

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

上面的示例似乎只适用于Firefox ...其他浏览器呢？

Answer 1

这取决于您的网络浏览器。在最新版本的Firefox中，它运行正常。但是，它在最新版本的Internet Explorer中不起作用。

你的问题有点紧张 - 我怀疑这是为什么它被贬低了 - 你在问为什么它没有工作，而不是如何让它发挥作用。

它无法正常工作，因为它并不是精选框支持的功能（还是！）

我建议您考虑使用JavaScript来实现相同的结果（具体而言，jQuery UI selectmenu）应该支持这种类型的“高级”结果。选择框。

Answer 2

你不应该依赖你的黑客在Firefox上运行的事实，并不意味着它也应该在Chrome上运行。

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

如果您正在寻找一种方式来设置原生选择元素的样式，也许这会有所帮助：
http://red-team-design.com/making-html-dropdowns-not-suck/

Answer 3

不允许选项元素包含子元素。我已经扩展了相同的答案，但是将背景颜色应用于选项元素，如此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});

})

在<option>标签内添加span并设置样式</option>

3 个答案: