HTML选择列表（<select>）中的选项部分样式如何设置？

Question

我正在尝试为选择列表选项的一部分（单词/字母）设置样式，类似于这样：

这是包含 <span style="color:red;">着色</span> 文本的文字。

上面的示例可以正常工作。但是，如果我尝试在 <select> 元素中进行类似操作，则根本不会呈现 span 标记。

<select>
  <option value="volvo">Volvo</option>
  <option value="alfaromeo"><span style="color:red">Alfa</span> Romeo</option>
</select>

此外，您可以在 option 标签内指定样式，但这会影响整个选择，而不仅仅是其中的一部分。

总之，除了制作一个类似于 select 的自定义 HTML 元素，还有没有其他好的方法来实现这个功能呢？

演示

- SDekov

---

选项元素不能有任何子元素。 - Mivaweb

总之，除了制作类似于select的自定义HTML元素，还有什么好的方法来实现这个功能吗？答案是否定的 :-) - Laurent S.

你可以使用一个将select转换为div或span元素的插件，然后就能够进行操作。一个插件的例子是：selectBoxIt。 - Mivaweb

最好将表单元素保留为表单元素，即使您认为它不够美观。这可以确保在任何设备、阅读器等上都能使用和识别它作为一个表单。 - BReal14

本文讨论了同样的话题：https://dev59.com/6W025IYBdhLWcg3w_rFA - Glenn Ferrie

Answer 1

这段代码对我有效。不确定这段代码在旧浏览器中的向后兼容性如何，但已在Chrome上进行了测试。

    <style type="text/css">
    select.picker {
        font-size: 2.4em;
    }
    select.picker option {
        color: green;
    }
    select.picker option:first-child {
        color: blue;
    }
</style>

这里是标记

<select class="picker">
    <option value="a">Option A</option>
    <option value="b">Option B</option>
    <option value="c">Option C</option>
</select>

证据…

快乐编程！

- Glenn Ferrie

---

OP只想要选项样式的一部分，而不是整个文本。 - Mivaweb

抱歉，我一开始看问题的时候没有注意到这个细节。我会删除我的回复。 - Glenn Ferrie

Answer 2

你无法对 option 标签进行样式设置。你可以使用像 Select 2 这样的库来隐藏原始的 select 并创建一个新的，这个新的可以被样式化。

- Jack

Answer 3

样式选择很无聊。尝试使用一些CSS和jQuery模仿选择框的选项：

https://github.com/octopuscreative/FancySelect

- Plummer