Стильная часть текста OPTION - PullRequest
Новая
       20

Стильная часть текста OPTION

30 голосов
/ 28 июля 2010

У меня есть список SELECT с несколькими элементами OPTION.Вот мой наивный подход к стилизации части текста опции: 

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

Это не работает: браузер не любит элемент SPAN внутри элемента OPTION.

Есть ли другой способ стилизовать часть текста элемента OPTION?

Ответы [ 6 ]

12 голосов
/ 19 ноября 2014

Но вы всегда можете создать поле выбора пользователя. Обратитесь к jsFiddle ниже,

JSFiddle для разноцветных опций выбора 

// 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);
}
8 голосов
/ 19 сентября 2015

Или вы можете сделать это с помощью Bootstrap Drop Downs плюс пару строк 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>
8 голосов
/ 28 июля 2010

Неа. option s стилизованы для платформы, и стилизация только части не работает. (Обычно это тоже не очень хорошая идея.)

1 голос
/ 12 марта 2019

Допустимое содержимое в теге параметра: Текст, возможно, с экранированными символами (например, & eacute;). Документ MDN для получения более подробной информации

0 голосов
/ 21 июня 2018

Это больше похоже на ответ / обходной путь к вопрос закрыт как дубликат для других тегов , а не стилизация, в частности для .

ЕслиВы не против испортить JavaScript, Select2 предоставляет очень лаконичный способ для достижения этой цели.Он также использует списки для этого.

Вот HTML 

<select id="e1" style="width:300px">
  <option value="AL" data-badge="3">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

А вот 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

И вот JSFiddle .

Rendered result

0 голосов
/ 07 сентября 2016

В некоторых случаях я мог сделать это с помощью jQuery.Посмотрите здесь: http://jsfiddle.net/rangine/wegx00La/4/

Я использовал поле выбора для выбора значка глифа в форме начальной загрузки.но, к сожалению, это работает только в 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);

Некоторые CSS: 

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

option.red {
  color: red;
}

option.green {
  color: green;
}

.preview {
  font-size: 20pt;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...