I recently made a change to one of our products to switch from using a standard dropdown to using one with optgroups. The dropdown shows a Clients > Projects > Task combination so it made it much more readible to make the clients groups.

In IE/Firefox etc. the standard display is groups in bold and options in standard weight, either using italics or not dependant on the browser but for some reason Chrome makes everything bold.

The solution, via electrictoolbox, which is also somewhat strange is to turn off bold for the option group which actually turns it off on the child elements and leaves the heading bold – go figure.

To leave other browsers displaying entries properly too, there’s a final bit of css targetting via Martin Ivanov and things are back to the way they should be.