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 and Opera and this post looks at Safari. 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.
Version Tested
I tested this on Safari 3.2.3 on Windows. I do not have access to OSX for testing Safari but I would imagine the rendering is the same cross platform.
Default styles
By default, Safari styles <optgrop> as bold with black text on a white background. The <option>s are indented and are also black on white; the text color of the body etc are ignored and not inherited from parent elements.
Some things you can style: Safari
The following shows some of the things you can style in a select box with options, optgroups and options in an optgroup with Safari (tested in version 3.2.3 on Windows).
font-style
select { font-style: normal|italic|oblique; } has no effect.
optgroup { font-style: normal|italic|oblique; } has no effect.
option { font-style: normal|italic|oblique; } has no effect.
Therefore in Safari you cannot change the font-style of a select box or its options.
font-weight
The same as for font-style, but setting "font-weight" as "bold" and "normal". Therefore in Safari you cannot change the font-weight of a select box or its options.
color
select { color: red; } has no effect.
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; } has no effect.
optgroup { font-family: serif; } has no effect.
option { font-family: serif; } has no effect.
Therefore you cannot change the font used in a select box in Safari.
font-size
select { font-size: 20px; } changes the font size for the whole select box.
optgroup { font-size: 20px; } has no effect.
option { font-size: 20px; } has no effect.
Therefore you can only change the font-size for a select box as a whole in Safari.
padding
Setting padding on a select, optgroup or option has no effect in Safari, and you cannot control the amount of indentation for an optgroup.
Next posts in this series
The next two HTML/CSS posts will look at Chrome and finally put all my findings into a table for easy comparison.