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

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>

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

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

Styling part of the OPTION text

Related

Recent Posts