Select Decorator for jQuery

You might have experienced that you cant style a HTML Select option as you needed. This plugin will help you to make your drop down to look as you like. It uses CSS styling, Images can do a lot, so setting up a DIV and a background and hiding your select box is the logic here. This is the second release of the plugin and it works perfectly on all the browsers including IE.

Demo

do some change on the opposit select box.

How to use

This is the little snippet of code which is used to make the bulk uploader on this webpage. This might be useful for you.

The below is my HTML

<div>
   <select id="MySelect">
      <option value="1">Option one</option>
      <option value="2">Option two</option>
      <option value="3">Option three</option>
   </select>
</div>

This is my JavaScript

<script type="text/javascript">
   jQuery('document').ready(function(){
      jQuery("#MySelect").selectdecorator(
         {
            DIVClass : "selectholder",
            onChange : function(){
               jQuery('#MySelectVal').html('You selected ' + jQuery("#MySelect").val());
            }
         }
      );
   });
</script>

This is my CSS

.selectholder{
   width:242px;
   overflow:0px;
   padding:4px;
   height:22px;
   display:block;
   background:url(images/select.gif);
   color:#FFF;
   font-family:Arial, Helvetica, sans-serif;
   font-weight:bold;
   font-size:13px;
   cursor:pointer;
}

   .selectholder span{
      width:242px;
      height:22px;
      display:block;
   }

   .selectholder ul{
      background:#FFF;
      border:1px solid #333;
      border-top:none;
      color:#000;
      display:block;
      width:242px;
      list-style:none;
      list-style-type:none;
   }

   .selectholder ul li{
      padding:2px 3px;
   }

   .selectholder ul li:hover{
      background:#0CF;
      color:#FFF;
   }

If you have linked the jQuery library and the jquery.selectdecorator.js to your HTML properly and you have added the two snippets of code properly then you will end up with styling your select fields.

Download here