lowfatcode

lowfatcode http://lowfatcode.wordpress.com the Atkins diet of software development blogging Sat, 05 Dec 2009 20:58:39 +0000 en hourly 1 http://wordpress.com/ http://s2.wp.com/i/buttonw-com.png lowfatcode http://lowfatcode.wordpress.com Firefox getComputedStyle() bug? http://lowfatcode.wordpress.com/2009/12/04/firefox-getcomputedstyle-bug/ http://lowfatcode.wordpress.com/2009/12/04/firefox-getcomputedstyle-bug/#comments Fri, 04 Dec 2009 23:19:52 +0000 lowfatcode http://lowfatcode.wordpress.com/?p=10 ]]> 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 example

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!

]]> http://lowfatcode.wordpress.com/2009/12/04/firefox-getcomputedstyle-bug/feed/ 1 jw Colour pickers (Internet Explorer on the left, Firefox on the right)