Home | About Chris Hope | Contact Chris Hope | Search:

Style HTML form elements optgroup and option with CSS in Safari

Posted May 30th, 2009 in HTML and CSS (Updated June 8th, 2009)

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.