Firefox getComputedStyle() bug?

One nice interface feature in Internet Explorer is that <select> elements take on the style of the currently selected <option> providing the user with better visual feedback about their selection.

Often I like to include a “Please select…” option as the first item in dropdown lists that don’t have a sensible default selection. Using a pale font colour for this option makes it clear to the user that they have not yet made their choice.

Colour pickers (Internet Explorer on the left, Firefox on the right)

Unfortunately it turns out that getComputedStyle() in Firefox always returns rgb( 255, 255, 255 ) when called on an <option> element. So this doesn’t work…

jQuery( "#myselect" ).css( "color", document.defaultView.getComputedStyle( jQuery( "#myselect option:selected" )[ 0 ], null ) );

…because the return result isn’t actually the right colour.

The workaround is a cludge and requires that you define your colours on each <option> element explicitly with inline CSS and access them through the css() function in jQuery (avoiding the need for getComputedStyle() altogether). Yuck!

Advertisement