样式部分的OPTION文本

Question

样式部分的OPTION文本我有一个包含多个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元素文本的一部分？

Answer 1

不。options以平台原生的方式设计样式，仅仅样式的一部分样式不起作用。（它通常也不是特别好的主意。）

Answer 2

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

JSFiddle用于多种颜色的选择框选项

// Insert a list item into the unordered list for each select optionfor (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);}