deviseOPTION文本的一部分
我有一个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元素。
有没有其他的方式来deviseOPTION元素文本的一部分？
不。 option以本地平台的方式进行样式设置，而只有样式的一部分不起作用。 （它通常也不是一个特别好的主意。）
但是你总是可以创build一个自定义select框。 参考下面的jsFiddle，
JSFiddle多彩色select框选项
// 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="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>
在某些情况下，我可以通过jQuery来实现。 看这里： http : //jsfiddle.net/rangine/wegx00La/4/
我用一个select框来select自举forms的字形图标。 但不幸的是，这只能在Firefox中工作（我不会在所有的浏览器上testing，在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; }
