jquery创意下拉多选框效果代码

代码语言:html

所属分类:表单美化

代码描述:jquery创意下拉多选框效果代码

代码标签: 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