Last week’s HTML/CSS post looked at stlying optgroup and options with Firefox and this post does the same but for Internet Explorer. This will be followed up with posts about the same for Opera, Chrome and Safari and then I’ll present the findings in a tabular format so it’s easy to see what can and can’t be styled consistently across browsers.
Default styles
By default, Internet Explorer styles the <optgroup> headings are bold and italic. The <option>s in an <optgroup> are indented. The font color is the same as the parent (or parent’s parent etc, ultimately the same as the body if none of the parent’s have a color set) and the background is white.
Some things you can style: Internet Explorer
The following shows some of the things you can style in a select box with options, optgroups and options in an optgroup with Internet Explorer (tested in versions 6 7 and 8 on Windows).
font-style
select { font-style: normal; } does not affect optgroup and it will remain italic.
select { font-style: italic; } or select { font-style: oblique; } will make all options in the select italic.
optgroup { font-style: normal; } has no effect on either the optgroup heading or the options within the optgroup.
option { font-style: italic; } or option { font-style: oblique; } has no effect.
Therefore if you want to make the options in a select italic in IE you have to set the select tag, and there’s no way to prevent the optgroup heading being italic.
font-weight
The same as for font-style, but setting "font-weight" as "bold" and "normal". Therefore if you want to make the options in a select bold in IE you have to set the select tag, and there’s no way to prevent the optgroup heading being bold.
color
select { color: red; } will make all options in the select red.
optgroup { color: red; } will make the optgroup headings and the options within that optgroup red.
option { color: red; } will make all options in the select red, but not the optgroup headings (as would be expected).
To make the optgroup heading a different color from the options within it, you would need to do something like this:
optgroup {
color: red;
}
option {
color: black;
}
background-color
select { background-color: red; } makes the background color of all options in the select red.
optgroup { background-color: red; } makes the background color of the optgroup headings and all options within the optgroup red.
option { background-color: red; } makes the background color of all options red, but not the optgroup headings.
If you wanted to make an optgroup white text on a black background but keep the options as black on white, do this:
optgroup {
background-color: black;
color: white;
}
option {
background-color: white;
color: black;
}
font-family
select { font-family: serif; } will make the font in the select as a whole serif.
optgroup { font-family: serif; } has no effect.
option { font-family: serif; } has no effect.
Therefore you can only set the font for the select as a whole with Internet Explorer.
font-size
The same as for font-family.
padding
Setting padding on an optgroup or option has no effect in Internet Explorer. You can set the padding of a select as a whole in IE8 but it’s a really weird effect and you can only click on the actual text part of the drop down.
Next posts in this series
Over the next few HTML/CSS posts I’ll look at Opera, Safari and Chrome and finally put all my findings into a table for easy comparison.