styles on optgroup

clarkk picture clarkk · Aug 21, 2011 · Viewed 10.8k times · Source

How can you put a style on a optgroup in a select tag?

http://jsfiddle.net/UCNJ8/3/

js:

$('<select></select>').appendTo('body').append('<option value="0">test</option>')
    .append($('<optgroup label="group"></optgroup>')
            .append('<option value="1">group test</option>'));

css:

select.optgroup[label] {
    font-style:normal;
}

Answer

Alex picture Alex · Aug 21, 2011

Use the CSS selector select optgroup instead.

Be aware that not every browser will respect optgroup rules (Webkit, for example). With that in mind, you might like to try a jQuery plugin that allows complete, cross-browsing styling of form elements; such as Uniform.