By default, select elements in Internet Explorer and Opera show the selected option's color and background color, while Firefox and WebKit browsers do not. jQuery selectColorize normalizes this behavior cross-browser for basic select box color styling, without having to resort to more "fancy" select box replacements.

Note that inline option color/background styles are necessary in Firefox due to an annoying getComputedStyle bug. Also, due to rendering issues in Firefox and Opera, it's best to set a background color on the select element if any of its options have background colors, otherwise it may have initial rendering issues.

Enable selectColorize, Destroy selectColorize

(select fg color set via CSS, options have fg+bg colors)
(select bg color set via CSS, options have fg+bg colors)
(select fg and bg colors set via CSS, options have fg+bg colors)
(select fg color set via CSS, options only have fg colors)

The code

$(function(){
  
  $('a.enable').click(function(){
    // Calling .change() might be necessary to visually update selects in
    // all browsers, if multiple selects are being initialized at the same
    // time.
    $('select').selectColorize().change(); // Initialize.
  });

  $('a.destroy').click(function(){
    $('select').selectColorize( false ); // Destroy.
  });
  
});