Html 选项文本的样式部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3354979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling part of the OPTION text
提问by rlandster
I have a SELECT list with several OPTION elements. Here is my naive approach to styling part of the option text:
我有一个包含几个 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>
This does not work: the browser does not like a SPAN element inside the OPTION element.
这不起作用：浏览器不喜欢 OPTION 元素内的 SPAN 元素。
Is there some other way to style part of an OPTION element's text?
有没有其他方法可以为 OPTION 元素的文本的一部分设置样式？
采纳答案by Ms2ger
Nope. options are styled in a way native to the platform, and styling only a part of one doesn't work. (It usually wouldn't be a particularly good idea either.)
不。options 以平台原生的方式进行样式设置，并且仅设置其中一部分的样式是行不通的。（这通常也不是一个特别好的主意。）
回答by clu3Less
But you could always create a Custom select box. Refer the jsFiddle below,
但是您始终可以创建一个自定义选择框。参考下面的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);
}
回答by Kirby
Or you could do it with Bootstrap Drop Downsplus a couple lines of Javascript.
或者你可以用Bootstrap Drop Downs加上几行 Javascript 来完成。
Here is the Bootstrap example with a slight alteration plus a 'lil 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>回答by Nikhil K S
Permitted content in the option tag is Text, possibly with escaped characters (like é).MDN doc for more details
选项标签中允许的内容是文本，可能带有转义字符（如é）。MDN 文档了解更多详情
回答by mlt
This is more like an answer / workaround to the question closed as a duplicate on other tagsrather than styling in particular for <options>.
这更像是对在其他标签上重复关闭的问题的答案/解决方法，而不是特别为<options> 设置样式。
If you don't mind getting dirty with JavaScript, Select2provides a very concise wayto achieve that. It does use lists for that as well.
如果您不介意使用 JavaScript，Select2提供了一种非常简洁的方法来实现这一点。它也使用列表。
Here is HTML
这是 HTML
<select id="e1" style="width:300px">
<option value="AL" data-badge="3">Alabama</option>
<option value="WY">Wyoming</option>
</select>
And here is CoffeeScript
这是 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
And here is JSFiddle.
回答by mr. hadi mollaei
In some cases I could do that by jQuery. Look here: http://jsfiddle.net/rangine/wegx00La/4/
在某些情况下，我可以通过 jQuery 做到这一点。看这里：http: //jsfiddle.net/rangine/wegx00La/4/
I used a select box for choosing a glyph icon in bootstrap form. but unfortunately this worked only in Firefox.(I don't test it on all browser. in Chrome not works and in IE! I threw it away.
我使用了一个选择框来选择引导程序形式的字形图标。但不幸的是，这只适用于 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);
Some CSS:
一些CSS：
#myselect {
margin: 40px;
height: 30px;
font-size: 14pt;
}
option.red {
color: red;
}
option.green {
color: green;
}
.preview {
font-size: 20pt;
}
