• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Style HTML form elements optgroup and option with CSS in Safari

Style HTML form elements optgroup and option with CSS in Safari

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.

Check Out These Related posts:

  1. Style HTML form elements optgroup and option with CSS in Firefox
  2. Style HTML form elements optgroup and option with CSS in Internet Explorer
  3. Style HTML form elements optgroup and option with CSS in Opera
  4. Style HTML form elements optgroup and option with CSS in Chrome

Filed Under: HTML And CSS

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap