我有一个包含几个 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 元素文本的一部分样式吗？
【问题讨论】：
但您始终可以创建自定义选择框。参考下面的jsFiddle，
JSFiddle for multi colored selectbox options
// 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);
}
【讨论】：
或者你可以用Bootstrap Drop Downs加上几行Javascript来做。
这里是 Bootstrap 示例，稍作改动加上一个 'lil Javascript：
$(function() {
$('#my-select').find('li').click(function() {
$('#selected').html($(this).html());
});
});<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Single button -->
<div id='my-select' class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="selected">Action</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action <span style='color:red'>like Super Man</span></a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</body>【讨论】：
<li>，jquery on.click 就会触发并将data-id= 值传递给隐藏的输入表单。
不。 options 以平台原生的方式进行样式设置，仅设置其中一部分的样式是行不通的。 （这通常也不是一个特别好的主意。）
【讨论】：
这更像是the question closed as a duplicate on other tags 的答案/解决方法，而不是专门为
如果您不介意使用 JavaScript，Select2 提供了一个 very concise way 来实现这一点。它也为此使用列表。
这里是 HTML
<select id="e1" style="width:300px">
<option value="AL" data-badge="3">Alabama</option>
<option value="WY">Wyoming</option>
</select>
这里是 CoffeeScript
$("#e1").select2
theme: "bootstrap"
templateResult: (data) ->
badge = $(data.element).data('badge')
if badge
return $(document.createTextNode(data.text)).add($('<span class="badge pull-right">').text(badge))
data.text
【讨论】：
选项标签中允许的内容是文本，可能带有转义字符（如é）。MDN doc for more details
【讨论】：
在某些情况下，我可以通过 jQuery 做到这一点。看这里：http://jsfiddle.net/rangine/wegx00La/4/
我使用了一个选择框来选择引导形式的字形图标。 但不幸的是，这只适用于 Firefox。（我没有在所有浏览器上测试它。在 Chrome 和 IE 中不起作用！我把它扔掉了。
HTML：
This code Only works in Firefox.
<br/>
<select id="myselect">
<option value="_none"> - Select One - </option>
<option value="asterisk">asterisk</option>
<option value="plus">plus</option>
<option value="euro" class="red">euro</option>
<option value="eur">eur</option>
<option value="minus" class="green">minus</option>
<option value="cloud">cloud</option>
<option value="envelope">envelope</option>
<option value="pencil">pencil</option>
<option value="glass">glass</option>
<option value="music">music</option>
<option value="search">search</option>
<option value="heart">heart</option>
<option value="star">star</option>
<option value="star-empty">star-empty</option>
<option value="user">user</option>
<option value="film">film</option>
</select>
<span class="preview"> </span>
jquery:
(function($) {
$(document).ready(function() {
$('#myselect option').each(function() {
$(this).html('<i class="glyphicon glyphicon-' + $(this).text() + '"></i> ' + $(this).text());
})
});
$('.preview').html(' <i class="preview glyphicon glyphicon-' + $('#myselect').val() + '"></i>');
$('#myselect').change(function() {
$('.preview').html(' <i class="preview glyphicon glyphicon-' + $('#myselect').val() + '"></i>');
});
})(jQuery);
一些 CSS：
#myselect {
margin: 40px;
height: 30px;
font-size: 14pt;
}
option.red {
color: red;
}
option.green {
color: green;
}
.preview {
font-size: 20pt;
}
【讨论】：