Skinning Select box using Jquery

A lot of jquery plugins are available in Internet to skin SELECT box. Some of them are very good but some times these plugins cause the performance of the site, if you are including lot of third party javascript files into your sites. I used some third party skinning javascript in my sites and it works fine but when I use lightbox and some other slide show plugin to my site this skinning js not working properly, because it took too much time to load all js.

So I planned to write a simple jquery code to skin the select box. I share the code here
<script>
$(document).ready(function(){
    $("#Selectboxid").before("<

span class='selectboxspan'>Select One</span>");

    //On Change Event
    $("#Selectboxid").change(function(){
        $(".selectboxspan").html($("#Selectboxid option:selected").html());
    });
});
</script>

Also  add these CSS in the code

 select#selectboxid{width:61px;height:20px;opacity:0;filter:alpha(opacity=0);position:relative;z-index:5;}
span.selectboxspan{background:url(skin.png) no-repeat scroll 0 0 transparent; height:17px;overflow:hidden;padding-left:4px;position:absolute;width:63px; border:1px solid #cccccc;}


The HTML code
<select id="Selectboxid"  name="skinnedSelectbox">
        <option value="0">Select One</option>
        <option value="1">Test1</option>
        <option value="2">Test2</option>
        <option value="3">Test3</option>
    </select>

Posted in: jquery