css выберите раскрывающийся список жирным шрифтом на некоторых <option>

Question

В раскрывающемся списке мне нужно сделать некоторые элементы «сильными / жирными».

Как я могу это сделать?

Пример того, что мне идеально нужно:

<option value="#"><strong>Andorra</strong></option> 
<option value="#">--Grandvalira</option> 
<option value="#">--Vallnord</option> 
<option value="#"><strong>Austria</strong></option> 
<option value="#">--Amadé</option> 
<option value="#">--Bad Kleinkirchheim</option> 
<option value="#">--Mallnitz</option>

Answer 1

Вы на самом деле не можете.

ближайшая вещь (вы не можете выбрать жирный элемент)

 <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>

Что дает вам это:

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

Вы также можете создать свой собственный, но он не будет вводить тег ввода (вы должны использовать свои собственные входы).

Answer 2

вы можете использовать :nth-child(N)

option:nth-child(1), option:nth-child(4) {
    font-weight:bold;
}

Демонстрация: http://jsfiddle.net/Sotiris/sqshN/

Для получения дополнительной информации и поддержки браузера для этого псевдокласса на http://reference.sitepoint.com/css/pseudoclass-nthchild

Answer 3

Использование CSS в работе как более быстрая и простая альтернатива

<option value="value" style="font-weight: bold;">SELECT ME</option>

Answer 4

Вы можете сделать это с помощью jQuery.

  $('#Your select').append($("<option></option>").attr.css("font-weight" , "bold").html("Bold Text"));

Вы должны добавить некоторую логику, чтобы определить, какие параметры выделены жирным шрифтом, очевидно.

Answer 5

Это также работает (Firefox 50 и Chrome 55). Пункты 3 и 5 выделены жирным шрифтом

   <style>
    .bld {font-weight:bold;}
   </style>
   <select>
    <option value = "1">Kanakangi
    <option value = "2">Ratnangi
    <option class = "bld" value = "8">Hanumatthodi
    <option value = "9">Dhenuka
    <option class = "bld" value = "15">Mayamalavagowla
    <option value = "16">Chakravaaham
  </select>