直接上干货:
需要的材料:
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;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; 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;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}
上面的样式请根据实际情况改写.