jquery创意下拉多选框效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery创意下拉多选框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
@font-face {
font-family:'Roboto';
font-style:normal;
font-weight:100;
src:url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1MmgVxIIzc.ttf) format('truetype')
}
@font-face {
font-family:'Roboto';
font-style:normal;
font-weight:300;
src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc9.ttf) format('truetype')
}
@font-face {
font-family:'Roboto';
font-style:normal;
font-weight:400;
src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype')
}
@font-face {
font-family:'Roboto';
font-style:normal;
font-weight:700;
src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype')
}
@font-face {
font-family:'Roboto';
font-style:normal;
font-weight:900;
src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfBBc9.ttf) format('truetype')
}
body {
font-family:'Roboto';
padding:0;
margin:0;
background:linear-gradient(-45deg,#183850 0,#183850 25%,#192c46 50%,#22254c 75%,#22254c 100%);
background-repeat:no-repeat;
background-attachment:fixed;
margin-top:100px;
margin-left:20px;
color:#ecf0f1
}
.container {
margin:0 auto;
display:table
}
.selectionator {
position:relative;
border-radius:2px;
background-color:#2c3e50;
color:#95a5a6;
perspective:800px;
width:200px
}
.selectionator .search {
position:relative;
display:block;
border:0;
width:100%;
padding:1em;
outline:0;
color:#FFF;
background-color:#16a085;
box-sizing:border-box;
transform-style:preserve-3d;
transform-origin:50% 0;
transition:transform .3s;
border-radius:2px;
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0