Стиль применяется для опции выбора только в браузере Firefox?

Question

У меня есть вариант выбора в моей форме, как показано ниже,

<select>
<option class="hdng">Number</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option class="hdng">Alphabets</option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>

в моем стиле я применил стиль заголовка,

.hdng
{
font-weight: bold;
padding-top: 10px;
}

Вышеуказанный стиль применяется только в браузере Firefox. В остальных браузерах этот стиль не поддерживается. Есть ли какое-то решение для этого?

Answer 1

В Chrome 16 это также не работает, рассмотрите возможность использования оптгрупп, которые, как правило, имеют лучшую поддержку стилей и семантически правильны в том, что вы пытаетесь сделать.

<select>
<optgroup label="Number">
   <option>1</option>
   <option>2</option>
   <option>3</option>
</optgroup>
<optgroup label="Alphabets">
   <option>a</option>
   <option>b</option>
   <option>c</option>
</optgroup>    
</select>

http://jsfiddle.net/sVKjv/1/