Styling select, optgroup and options with 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:

  FirefoxIESafariChromeOpera
Default option  black on whiteblack on whiteblack on whiteblack on whiteblack 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-styleselectNoYes *2NoYesYes
 optgroupYesNoNoYes *1No
 optionYesNoNoYesNo
font-weightselectNoYes *2NoYes *2Yes
 optgroupYesNoNo*6No
 optionYesNoNoNoNo
colorselectYesYesNoYesYes
 optgroupYes *1Yes *1YesYes *1Yes *1
 optionYesYesYesYesYes
background-colorselectYesYesYesYesYes *7
 optgroupYes *1Yes *1Yes *4Yes *4Yes *1
 optionYesYesYesYesYes
font-familyselectYesYesNoYesYes
 optgroupYes *1NoNoYes *1No
 optionYesNoNoNoNo
font-sizeselectYesYesYesYesYes
 optgroupYes *1NoNoYes *1No
 optionYesNoNoNoNo
paddingselectYesYes *3NoYes *3Yes *3
 optgroupYes *1NoNoNoNo
 optionYesNoNoNoNo

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.