设置选项文本的部分样式

作者

我有一个包含几个选项元素的选择列表。以下是我设计选项文本部分样式的天真方法：

&lt；选择name=“color”&gt；
&lt；选项值=“0”&gt；红色&lt；span style=“font-weight:bold；”和；慢&lt/span&gt&lt/选项&gt；
&lt；选项值=“1”&gt；蓝色&lt；span style=“font-weight:bold；”和；较慢&lt/span&gt&lt/选项&gt；
&lt；选项值=“2”&gt；绿色&lt；span style=“font-weight:bold；”和；最慢&lt/span&gt&lt/选项&gt；
&lt/选择&gt；

这不起作用：浏览器不喜欢选项元素中的跨度元素

是否有其他方法来设置选项元素文本的一部分的样式

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

用于多色选择框选项的JSFIDLE

//为每个选择选项在无序列表中插入一个列表项
对于（变量i=0；i&lt；numberOfOptions；i++）{
$（'lt；li/&gt；'{
html:$this.children（'option'）.eq（i）.text（）
.split（''）.join（'&lt；span style=“color:red”&gt；'），
rel:$this.children（'option'）.eq（i）.val（）
}).附件（$清单）；
}

相关文章：

  1. 如何使浮动元素居中？
  2. 用于Firefox的自定义CSS滚动条
  3. 大纲对文本的影响
  4. 如何调整单个flexbox项（覆盖调整内容）[重复]

发表评论