下拉菜单美化

效果图:

html

<div class="test-con">
<select id="test">
<option>请选择</option>
<option value="1">测试1</option>
<option value="2" selected>测试2</option>
<option value="3">测试3</option>
<option value="4">测试4</option>
</select>
</div>

css

<!-- select美化 -->
.selectpick-div {
background-color: #FFFFFF;
font-size: 13px;
font-weight: 500;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: solid 1px #CFCFCF;
line-height: 30px;
text-align:center;
padding-left: 5px;
overflow: hidden;
cursor: pointer;
overflow: hidden;
z-index: 9060;
}
.selectpick-icon {
float: right;
background: url('http://www.eol.cn/js/common/plugin/images/select.jpg') no-repeat center;
margin-right: 5px;
height: 30px;
width: 9px;
cursor: pointer;
}
.selectpick-div:hover {
background-color: #F5F5F5;
border: solid 1px #ccc;
}
.selectpick-div:active {
-moz-box-shadow: 0 0 3px #0099CC;
-webkit-box-shadow: 0 0 3px #0099CC;
box-shadow: 0 0 3px #0099CC;
border: solid 1px #0099CC;
}
/*下拉框的主体*/
.selectpick-options {
border: solid 1px #CFCFCF;
border-bottom: none;
position: absolute;
z-index: 9060;
font-size: 13.5px;
text-align:center;
display:none;
}
.selectpick-options ul {
list-style: none;
height: auto;
margin: 0px;
padding: 0px;
z-index: 9060;
font-size: 13.5px;
}
.selectpick-options ul li {
border-bottom: solid 1px #CFCFCF;
padding-left: 5px;
display: block;
font-size: 13.5px;
z-index: 9060;
background-color: #fff;
}
.selectpick-options li:hover{
background-color:#3BAFDA;
color:#fff;
}
.selectpick-options ul li.selectpick-options-selected {
background-color:#3BAFDA;
color:#fff;
z-index: 9060;
}
/*设置为disabled的时候*/
.selectpick-no-select {
cursor: default;
color: #9a9898;
background-color: #F5F5F5;
}
/*设置下拉框的不透明度*/
.select-hide {
display:none;
-moz-opacity: 0;
opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity =0);
}
/*其他*/
.selectpick-options li{
cursor:pointer;
}
.selectpick-options li label{
cursor:pointer;
}
.selectpick-div-box{
margin:0 5px;
display:inline-block;
*zoom:1; *display:inline;
position:relative;
}

js

<script type="text/javascript"  src="http://www.eol.cn/js/common/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.eol.cn/js/common/plugin/selectpick.min.js"></script>
<script type="text/javascript">
$(function(){
// 触发id为test的select美化
$("#test").selectpick({
container:'.test-con',
onSelect:function(value,text){
// 选中触发的回调
onSelectFun();
}
});
function onSelectFun(){
console.log('test');
}
})
</script>

插件配置

1.拷贝对应html,css,js代码到页面中,js写在页面最底部
2.插件配置:

$("#test").selectpick({
container:'.test-con', // 美化出来的div放在class为test-con的div中
onSelect:function(value,text){ //选中触发回调
// 选中触发的回调
onSelectFun();
},
width: 30, // 宽度
height: 150, // 高度
disabled: false, //是否是不可点状态,默认为false,
//激活使用$("#selectpick-test").parent().remove();
//$("#test").selectpick({container:'.test-con',disabled:false});

});

3.下拉菜单的背景图标是一个图片,需要修改的话需要重新引用
4.如果一个页面有多个下拉菜单,或者用js动态添加了一个select,需要再次调用插件