styles on optgroup

Question

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

Solution

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.

Comments

[clarkk]

it works.. but how can I then reduce or remove the left padding/margin of the optgroup in the select?

[Alex]

Well, as I say, it won't style all browsers, but if you want to try remove the padding & margin, then use the appropriate style declarations; select optgroup { margin: 0; padding: 0; }