Theming SELECT Lists

Tuesday, December 6, 2011 - 16:22

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 jquery.select_skin.js ( download : http://www.verot.net/jquery_select_skin.htm ). What this jQuery script does is replace your SELECT element with DIV markup, so that theming it is nice and simple.

So, firstly download jquery.select_skin.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.SkinnedSelect =  {
        attach: function(context, settings) {
          jQuery('#ID').select_skin();
        }
      };
    })(jQuery);

One thing i have noticed, is that an inline SELECT becomes a inline-block SELECT, CSS below sorts that out:

div.cmf-skinned-select  {
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
}