Tutorial | Mengubah Tampilan SELECT Menjadi Lebih Menarik

Kalo mengubah tampilan div, menu dropdown, dan lainnya munfkin sudah biasa. Nah kali ini kita akan mengubah tampilan SELECT pada halaman html hanya dengan menggunakan JQuery dan CSS.

Hasil tampilannya lumayan bagus looh, simpel dan ringan :D Untuk tampilannya nanti kurang lebih seperti ini

HTML Source Code

<div>
<select class="select" title="Select one">
    <option></option>
    <option>Blue</option>
    <option>Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>
</div>

CSS Source Code

/* untuk div di dalam form kita set posisinya menjadi relative */
form div{position:relative;} 

select.select{
    position:relative;
    z-index:10;
    width:166px !important;
    height:26px !important;
    line-height:26px;
}

span.select{
    position:absolute;
    bottom:0;
    float:left;
    left:0;
    width:166px;
    height:26px;
    line-height:26px;
    text-indent:10px;
    background:url(images/bg_select.gif) no-repeat 0 0;
    cursor:default;
    z-index:1;
 }

Kemudian dengan sedikit bantuan JQuery, maka hasilnya akan sempurna :D

$(document).ready(function(){ 

    if (!$.browser.opera) {

        $('select.select').each(function(){
            var title = $(this).attr('title');
            if( $('option:selected', this).val() != ''  ) title = $('option:selected',this).text();
            $(this)
                .css({'z-index':10,'opacity':0,'-khtml-appearance':'none'})
                .after('<span class="select">' + title + '</span>')
                .change(function(){
                    val = $('option:selected',this).text();
                    $(this).next().text(val);
                    })
        });

    };
  
});

Demikian tadi tutorial Mengubah Tampilan SELECT Menjadi Lebih Menarik, semoga tutorial ini bermanfaat :D
Untuk demonya bisa diakses melalui link di bawah ini :
http://omdjin.com/demo/tutorial_select/