Last week’s HTML/CSS post looked at using optgroup to group options in an HTML select box and this time I’ll look at how to style optgroup and options with CSS. This post concentrates on Firefox.
Default styles
By default, Internet Explorer and Mozilla Firefox style 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.
Apple Safari (only tested on Windows) defaults <optgroup> to bold with the <option>s indented. The font color is black on white and the parent’s colors have no effect.
Google Chrome defaults <optgroup> to bold with the <option>s indented. The font color is the same as the parent and the background is white.
Opera styles <optgrop> with white text on a black background. The <option>s are indented and the font color inherited from the parent on a white background.
Some things you can style: Firefox
The following shows some of the things you can style in a select box with options, optgroups and options in an optgroup with Firefox (tested in version 3 on Windows).
It’s taken a while to test this out so I’ll continue this into another post for each of the other browsers because they all handle them differently. At the end I’ll make a table to compare the difference between these 4 browsers as an easy reference. Unfortunately they all handle things differently.
font-style
Setting { font-style: normal|italic|oblique; } has no effect on select tags but setting it on optgrop or option does work, i.e. you could do "option { font-style: italic }" to make the options in a select box italic, or "optgroup { font-style: normal; }" to make the optgroup heading not italic.
font-weight
Same as for font-style, but comparing "bold" and "normal".
color
Setting the color for the whole select e.g. "select { color: red}" will make the optgroup and option elements that color. Setting it for optgroup only will set it for the optgroup heading as well as the options belonging to that optgroup Setting it for option only will only apply it to the options.
So with Firefox if you wanted to make the optgroup headings e.g. red but leave the options as black you would need to do this:
optgroup {
color: red;
}
option {
color: black;
}
background-color
Setting the background-color for a select applies it to the whole select. Setting it for optgroup applies it to the optgroup heading as well as the options within that group. Setting it for option applies it to the options only.
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
Setting the font-family for a select will apply it to the options but not to an optgroup or to an option in an optgroup. Setting it for an optgroup will also make the options inside the optgroup be the same font. And then you can also set option with a different font. As a failsafe, if you wanted to make the font serif for all items in a select box that has optgroups in it then do this:
select, optgroup, option {
font-family: serif;
}
font-size
The same as for font-family.
padding
If you want to change the indent of the options in an optgroup use padding-left. It should be assigned like so, changing 20px to your preferred indent:
optgroup option {
padding-left: 20px;
}
Note that if you set it for just "option" and not "optgroup option" then any options that are not in an optgroup will also be indented.
Next posts in this series
Over the next few HTML/CSS posts I’ll look at Internet Explorer, Opera, Safari and Chrome and finally put all my findings into a table for easy comparison.
