美化select下拉框
Posted 前端[色色]
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了美化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}
上面的样式请根据实际情况改写.
以上是关于美化select下拉框的主要内容，如果未能解决你的问题，请参考以下文章
怎样用 CSS + JS 美化网页中的 select 下拉框