选项文本的样式部分

Question

我有一个包含多个 OPTION 元素的 SELECT 列表。这是我对选项文本的一部分进行样式设置的幼稚方法：

 <select name="color">
<option value="0">red <span style="font-weight: bold;">SLOW</span></option>
<option value="1">blue <span style="font-weight: bold;">SLOWER</span></option>
<option value="2">green <span style="font-weight: bold;">SLOWEST</span></option>
</select>

这不起作用：浏览器不喜欢 OPTION 元素内的 SPAN 元素。

有没有其他方法来设置 OPTION 元素文本的一部分？

原文由 rlandster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

没有。 option 以平台原生的方式设置样式，仅设置其中一部分的样式是行不通的。 （这通常也不是一个特别好的主意。）

原文由 Ms2ger 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

但您始终可以创建自定义选择框。参考下面的jsFiddle，

用于多色选择框选项的 JSFiddle

 // Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
    $('<li />', {
        html: $this.children('option').eq(i).text()
        .split(' ').join(' <span style="color:red">'),
            rel: $this.children('option').eq(i).val()
    }).appendTo($list);
}

原文由 clu3Less 发布，翻译遵循 CC BY-SA 3.0 许可协议