Stil für ausgewählte Option im Firefox-Browser allein angewendet? - HTML, Stile, Cross-Browser

Ich habe eine Option in meiner Form wie unten,

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

In meinem Stil habe ich Style Heading angewendet,

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

Der obige Stil wird nur im Firefox-Browser angewendet. Restliche Browser wird der Stil nicht unterstützt. Gibt es dafür eine Lösung?

Antworten:

3 für die Antwort № 1

Es scheitert auch für mich in Chrome 16, in Betracht zu ziehen, Opt-Groups zu verwenden, die tendenziell bessere Styling-Unterstützung haben und semantisch korrekt für das sind, was Sie versuchen zu tun.

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


Speisekarte