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;
}