jquery+bootstrap模糊查询的下拉选择框效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery+bootstrap模糊查询的下拉选择框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.3.3.7.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.7.css">
<style>
.box {
margin: 0px auto;
width: 500px;
margin-top: 70px;
}
* {
margin: 0;
padding: 0;
}
em {
font-style: normal;
}
.dropdown {
width: 300px;
}
.dropdown button {
width: 100%;
text-align: left;
border: solid 1px #e1e1e1;
background: #fff !important;
border-radius: 3px;
height: 32px;
}
.dropdown button i {
float: right;
margin-top: 8px;
}
.dropdown ul {
width: 100%;
}
.dropdown ul input {
height: 25px;
padding: 3px 10px;
border: 1px solid #ccc;
border-radius: 15px;
width: 100%;
}
.dropdown-menu li:first-child {
position: relative;
padding: 5px 10px;
}
.dropdown-menu li:first-child i {
position: absolute;
top: 12px;
right: 20px;
font-size: 10px;
}
</style>
<.........完整代码请登录后点击上方下载按钮下载查看
网友评论0