Styling part of the OPTION text_问答_开发者_运维开发者技术经验分享

I have a SELECT list with several OPTION elements. Here is my naive approach to styling part of the option text:

<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.

Is there some other way to style part of an OPTION element's text?

But you could always create a Custom select box. Refer the jsFiddle below,

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);
}

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.)

Or you could do it with Bootstrap Drop Downs plus a couple lines of Javascript.

Here is the Bootstrap example with a slight alteration plus a '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>

This is more like an answer / workaround to the question closed as a duplicate on other tags rather than styling in particular for <options>.

If you don't mind getting dirty with JavaScript, Select2 provides a very concise way to achieve that. It does use lists for that as well.

Here is 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

$("#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.

Styling part of the OPTION text

Permitted content in the option tag is Text, possibly with escaped characters (like é).MDN doc for more details

While you can't put markup within an OPTION element, you can use the CSS ::BEFORE and/or ::AFTER pseudo-elements and give them different styles. For example:

<style>
option::before 
    {content: attr(value) ":"; 
     display:inline-block; padding-right:3px; padding-left:1px;
     font-weight:bold; width:1.6em; text-align:right;}
</style>

<select name=menu multiple size=4>
<option value=1>Hamburger</option>
<option value=2>Cheeseburger</option>
<option value=3>Hot Dog</option>
<option value=4>Fries</option>
</select>

This will create a SELECT element with bolded numbers for each OPTION.

Note: I haven't tried this with all browsers yet, but it should work with all the modern ones.

In some cases I could do that by jQuery. Look here: 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.

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:

#myselect {
  margin: 40px;
  height: 30px;
  font-size: 14pt;
}

option.red {
  color: red;
}

option.green {
  color: green;
}

.preview {
  font-size: 20pt;
}