This post is part of a series looking at how to style optgroup and options with CSS. Previously I have looked at Firefox and Internet Explorer and this post looks at Opera. At the end of the series 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, 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: Opera
The following shows some of the things you can style in a select box with options, optgroups and options in an optgroup with Opera (tested version 9.64 on Windows).
font-style
select { font-style: normal|italic|oblique; } will make all options in the select normal (the default) or italic (for italic or oblique).
optgroup { font-style: normal|italic|oblique; } has no effect on either the optgroup heading or the options within the optgroup.
option { font-style: normal|italic|oblique; } has no effect.
Therefore in Opera you can only style the font-style for a select box as a whole, and cannot change the style for optgroup (and therefore the optgroup heading) or options.
font-weight
The same as for font-style, but setting "font-weight" as "bold" and "normal". Again, if you want to font-weight for a select box in Opera it’s all or nothing.
color
select { color: red; } will make all options in the select red but not the optgroup labels.
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 in the select red but not does affect the background color of the optgroup heading, which remains black.
optgroup { background-color: red; } makes the background color of all options red, including the optgroup label.
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 red text on a yellow background but keep the options as black on white, do this (I know you wouldn’t want to use those colors but in my other posts I used white text on a black background, which is what Opera does by default):
optgroup {
background-color: yellow;
color: red;
}
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 Opera.
font-size
The same as for font-family.
padding
Setting padding on an optgroup or option has no effect in Opera so you cannot control the amount of indentation. You can set the padding of a select as a whole in Opera (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
Over the next few HTML/CSS posts I’ll look at Safari and Chrome and finally put all my findings into a table for easy comparison.
