使用div+css制作下拉框

div+css

由于原生的<select>下拉列不是很美观，又不喜欢插件，根据插件的样式使用dvi仿制了一个下拉框。

立即预览

所有代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉框demo-pdbn.top</title>
<style>
body {
width: 400px;
margin: 8px auto;
}
.selectpick_div {
background-color: #FFFFFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: solid 1px #CFCFCF;
line-height: 30px;
position: absolute;
padding-left: 5px;
overflow: hidden;
cursor: pointer;
width: 196px;
}
.selectpick_icon {
float: right;
background: url(https://pdbn.top/uploads/2015/11/icon.png) no-repeat center;
margin-right: 5px;
height: 30px;
width: 9px;
cursor: pointer;
}
.selectpick_options {
border-top-style: solid;
border-top-width: 1px;
border-top-color: rgb(207, 207, 207);
width: 200px;
top: 40px;
border: solid 1px #CFCFCF;
border-bottom: none;
position: absolute;
display: none;
z-index: 9060;
}
.selectpick_ul_test_3 {
list-style: none;
height: auto;
margin: 0px;
padding: 0px;
z-index: 9060;
font-size: 14px;
}
.selectpick_options ul li {
height:27px;
line-height:27px;
border-bottom: solid 1px #CFCFCF;
padding-left: 5px;
z-index: 9060;
background-color: #fff;
}
.selectpick_options ul li:hover{font-size:16px;
background-color:#E05865;
color:#fff;
height:27px; 
line-height:27px;
}
.selectpick_div:hover {
background-color: #F5F5F5;
border: solid 1px #ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" >
 $(document).ready(function(){
$(".selectpick_div").click(function(){
$(".selectpick_options").toggle();
});
}); 
</script>
</head>
<body>
<div class="selectpick_div">
 <span>请选择</span>
 <span class="selectpick_icon"></span>
</div>
<div class="selectpick_options">
 <ul class="selectpick_ul_test_3">
 <li>测试1</li>
 <li>测试2</li>
 <li>测试3</li>
 <li>测试4</li>
 </ul>
</div>
</body>
</html>