Theming SELECT Lists

Theming form elements can be tricky. Each browser and operating system renders form controls in their own unique way.  Being unique might be great in a social context but not when your SELECT list background image which looks great in Firefox, doesnt appear in I.E  urghh!

Whenever I have to style SELECT lists I use Selectyze ( download : http://www.myjqueryplugins.com/Selectyze ). What this jQuery script does is replace your SELECT element with DIV markup, so that theming it is nice and simple.

So, firstly download selectyze.js and include the script into your page. If you are using drupal you can do this via your themes .info file.

Then, apply the plugin to the element, I usually do it like this:
 

(function ($) {
      Drupal.behaviors.selectyze =  {
        attach: function(context, settings) {
          $("#Id").Selectyze();
        }
      };
    })(jQuery);

 

Violia!