样式部分的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用于多种颜色的选择框选项//&nbsp;Insert&nbsp;a&nbsp;list&nbsp;item&nbsp;into&nbsp;the&nbsp;unordered&nbsp;list&nbsp;for&nbsp;each&nbsp;select&nbsp;optionfor&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;numberOfOptions;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('<li&nbsp;/>',&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html:&nbsp;$this.children('option').eq(i).text() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.split('&nbsp;').join('&nbsp;<span&nbsp;style="color:red">'), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rel:&nbsp;$this.children('option').eq(i).val() &nbsp;&nbsp;&nbsp;&nbsp;}).appendTo($list);}