This post is part of a series looking at how to style optgroup and options with CSS. Previously I have looked at Firefox, Internet Explorer, Opera, Safari and this post looks at Google Chrome. Next week’s HTML/CSS post will present the findings in a tabular format so it’s easy to see what can and can’t be styled consistently across browsers.
Version Tested
I tested this on Google Chrome 2.0.172.28 on Windows.
Default styles
By default, Google Chrome styles <optgrop> as bold with black text on a white background. The <option>s are indented and are also black on white. Note that in 2.0.172.28 the options within the optgroup are also bold but I think this is a bug because when I last looked at this in Chrome (which was one of the 1.0 releases) the options in an optgroup were not bold.
The color and background color of the select are not in inherited from parent elements and remain balck on white even if the page background is a different color (which is standard for input fields).
Some things you can style: Google Chrome
The following shows some of the things you can style in a select box with options, optgroups and options in an optgroup with Google Chrome.
font-style
select { font-style: normal|italic|oblique; } styles the select box as a whole.
optgroup { font-style: normal|italic|oblique; } styles the optgroup label and options within the optgroup.
option { font-style: normal|italic|oblique; } has no effect.
Therefore in Chrome you can change the font-style for the select box as a whole, for optgroups as a whole but not for <option>
font-weight
select { font-weight: normal; } has no effect but select { font-weight: bold; } will make all options in the select box bold.
optgroup { font-weight: bold; } has no effect because all the options are already bold (see my note above how this is possibly a rendering bug in the version tested) but optgroup { font-weight: normal; } interestingly will make the options in the optgroup no longer bold, but leaves the label as bold. This is way to therefore fix the bug.
option { font-weight: normal|bold; } has no effect.
color
select { color: red; } makes all text 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 labels.
To make the optgroup label 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 and the optgroup labels in the select red.
optgroup { background-color: red; } makes the background color of the optgroup label red, but not the options within that optgroup.
option { background-color: red; } makes the background color of all options red, but does not affect the optgroup label.
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; } styles the select box as a whole.
optgroup { font-family: serif; } styles the optgroup label and options within it.
option { font-family: serif; } has no effect.
font-size
select { font-size: 20px; } changes the font size for the whole select box.
optgroup { font-size: 20px; } changes the font size for the optgroup label and options within it.
option { font-size: 20px; } has no effect.
padding
Setting padding on an optgroup or option has no effect in Chrome so you cannot control the amount of indentation. You can set the padding of a select as a whole in Chrome (as you can with IE8) but it looks really weird. Unlike IE8 you can click anywhere in the select to open it even if it has padding.
Next posts in this series
This concludes the individual look at each of the major web browsers and how they render various styles applied to a select box, its optgroup and label, and options. There probably aren’t many instances where you’d style a select box in this way but it is useful to know what can and can’t be done.
In next week’s HTML/CSS post I’ll combine the information from these posts into a table so it’s easy to see what can and can’t be styled consistently across browsers.