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