Styling select, optgroup and options with CSSStyling select, optgroup and options with CSS

Posted June 6th, 2009 in HTML and CSS

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

  1. Sets it for the optgroup label and the options within the optgroup
  2. 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
  3. 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
  4. Affects the optgroup label but not the options within the optgroup
  5. As of the writing of this post, the current version of Chrome (2.0.172.28) makes the options within an optgroup also bold
  6. 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
  7. 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.

Related posts:

Comments

blog comments powered by Disqus