美化select下拉框

直接上干货:

需要的材料:

change_select.js (文末会给出下载地址)

使用方法:

1.调用方法:
<script type="text/javascript" >
    $(function(){
        $("select").selectCss();
    })
</script>

*使用时必须引用jquery

$("select")是选取所有的下拉框,根据自己实际情况更改.

2.调整样式:
/*下拉框样式*/
.tag_select,.tag_select_hover,.tag_select_open{display:inline-block;width:130px;height:30px;background:url("../images/sel_bg.png") 120px center no-repeat;padding:0 0 0 15px;line-height:30px;color:#888;font-size:14px;cursor:pointer;border:1px solid #dedede}

ul.tag_options{position:absolute; top:32px;margin:0;list-style:none;background:#fff;padding:0 0 1px;margin:0;width: 145px;overflow:hidden; overflow-y:auto; font-size:14px;cursor:pointer; z-index:1000 ; border:1px solid #C8C8C8; border-top:none;}

ul.tag_options li{background:#fff; display:block;width:125px;padding:0 10px;height:25px;text-decoration:none;line-height:25px;color:#000; font-weight:normal; font-size:14px}

ul.tag_options li.open_hover , ul.tag_options li.open_selected{background:#eee;color:#404040; font-weight:normal; font-size:14px}

上面的样式请根据实际情况改写.

点击这里下载:change_select.js