模拟美化select下拉菜单代码实例
分类：实例代码
模拟美化select下拉菜单代码实例属于前端实例代码，有关更多实例代码大家可以查看。
HTML自带的<select>下拉菜单美观度不够，可以通过模拟来解决此问题。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端教程网</title>
</head>
<style type="text/css">
.ins-box {
width: 100px;
height: 50px;
margin: 100px auto;
}
.ins-select {
width: 120px;
height: 26px;
position: relative;
font-size: 16px;
float: left;
color: #5F5F5F;
}
.ins-select dl {
border: 1px solid #FF3C34;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
background-image: url(https://i4.buimg.com/1949/1ac9f315a7a4580b.png);
background-repeat: no-repeat;
background-position: 90% 50%;
color: #5F5F5F !important;
}
.ins-option {
top: 46px;
width: 120px;
position: absolute;
background-color: #fff;
border: 1px solid #aaa;
display: none;
z-index: 100;
}
.ins-option dd {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
font-size: 14px;
-webkit-margin-start: 0px
}
.ins-option dd:hover {
background: #FF3C34;
color: #ffffff;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script>
$(function () {
$(document).bind("click", function (e) {
var target = $(e.target);
//点击目标 标题栏(.select dt)时,收回全部选项表,展开当前选项表
if (target.closest(".ins-select dl").length != 0) {
$(".ins-option").hide();
target.next('div').show();
}
//点击目标 选项(.select dd)时,改变选值到标题栏(dt),存储选值到title,收回选项表
if (target.closest(".ins-option dd").length != 0) {
target.parent('div').prev('dl').text(target.text());
target.parent('div').prev('dl').attr('title', target.text());
target.parent('div').hide();
}
//点击空白处时收回选项
if (target.closest(".ins-option").length == 0 && target.closest(".ins-select dl").length == 0) {
$(".ins-option").hide();
}
})
})
</script>
<body>
<div class="ins-box">
<dl class="ins-select">
<dl title="value">房型</dl>
<div class="ins-option">
<dd>一室一厅</dd>
<dd>一室二厅</dd>
<dd>一室三厅</dd>
<dd>一室四厅</dd>
<dd>一室五厅</dd>
</div>
</dl>
</div>
</body>
</html>
模拟美化select下拉菜单代码实例，这样的场景在实际项目中还是用的比较多的，关于模拟美化select下拉菜单代码实例就介绍到这了。