发表新帖
发表新帖

Styling part of the OPTION text

前端 未结
关注
6 666
迷失自我
迷失自我 2020-11-22 15:19

I have a SELECT list with several OPTION elements. Here is my naive approach to styling part of the option text:
提交评论
  •  加载中...
  • 迷失自我
    2020-11-22 15:58

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

    0 讨论(0)
  • 遇见更好的自我
    2020-11-22 16:14

    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);
}
    0 讨论(0)
  • 野性不改
    2020-11-22 16:14

    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;
}
    0 讨论(0)
  • 半阙折子戏
    2020-11-22 16:18

    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>

    0 讨论(0)
  • 生来不讨喜
    2020-11-22 16:20

    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.

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题