Over the past three weeks I’ve looked at some CSS styles that can be applied to select, optgroup and option tags and how they are rendered differently across different browsers. The information is summarised here in tablular format so it’s easier to compare.
For further reading check out the individual posts for each browser at he end of this post under the related posts heading.
As per my conclusion at the end of the post, it’s probably better to leave styling of select boxes, optgroup and options alone and just leave them as the defaults because cross browser styling is so inconsistent it’s not worth the bother. Having said that, here’s the table:
| Firefox | IE | Safari | Chrome | Opera | ||
| Default option | black on white | black on white | black on white | black on white | black on white | |
| Default opgroup label | black on white bold, italic |
black on white bold, italic |
black on white bold |
black on white bold *5 |
white on black bold |
|
| font-style | select | No | Yes *2 | No | Yes | Yes |
| optgroup | Yes | No | No | Yes *1 | No | |
| option | Yes | No | No | Yes | No | |
| font-weight | select | No | Yes *2 | No | Yes *2 | Yes |
| optgroup | Yes | No | No | *6 | No | |
| option | Yes | No | No | No | No | |
| color | select | Yes | Yes | No | Yes | Yes |
| optgroup | Yes *1 | Yes *1 | Yes | Yes *1 | Yes *1 | |
| option | Yes | Yes | Yes | Yes | Yes | |
| background-color | select | Yes | Yes | Yes | Yes | Yes *7 |
| optgroup | Yes *1 | Yes *1 | Yes *4 | Yes *4 | Yes *1 | |
| option | Yes | Yes | Yes | Yes | Yes | |
| font-family | select | Yes | Yes | No | Yes | Yes |
| optgroup | Yes *1 | No | No | Yes *1 | No | |
| option | Yes | No | No | No | No | |
| font-size | select | Yes | Yes | Yes | Yes | Yes |
| optgroup | Yes *1 | No | No | Yes *1 | No | |
| option | Yes | No | No | No | No | |
| padding | select | Yes | Yes *3 | No | Yes *3 | Yes *3 |
| optgroup | Yes *1 | No | No | No | No | |
| option | Yes | No | No | No | No |
Starred Notes
- Sets it for the optgroup label and the options within the optgroup
- The select box as a whole can be changed to italics/bold, but setting font-style:normal or font-weight:normal will not change the optgroup to normal
- The padding of the select as a whole can be set in IE8, Chrome and Opera but it’s a really weird effect so you wouldn’t do this
- Affects the optgroup label but not the options within the optgroup
- As of the writing of this post, the current version of Chrome (2.0.172.28) makes the options within an optgroup also bold
- In Chrome optgroup { font-weight: bold; } has no effect because all the options are already bold, optgroup { font-weight: normal; } makes the options in the optgroup normal but leaves the label bold
- The optgroup label will still have a black background, but the options will be the specified background-color
Conclusion
As noted above the table, it’s probably better to leave styling of select boxes, optgroup and options alone and just leave them as the defaults because cross browser styling is so inconsistent it’s not worth the bother.
