jquery实现带阴影下拉多选效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery实现带阴影下拉多选效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .selectMultiple {
    	width:240px;
    	position:relative;
    }
    .selectMultiple select {
    	display:none;
    }
    .selectMultiple >div {
    	position:relative;
    	z-index:2;
    	padding:8px 12px 2px 12px;
    	border-radius:8px;
    	background:#fff;
    	font-size:14px;
    	min-height:44px;
    	box-shadow:0 4px 16px 0 rgba(22,42,90,0.12);
    	transition:box-shadow .3s ease;
    }
    .selectMultiple >div:hover {
    	box-shadow:0 4px 24px -1px rgba(22,42,90,0.16);
    }
    .selectMultiple >div .arrow {
    	right:1px;
    	top:0;
    	bottom:0;
    	cursor:pointer;
    	width:28px;
    	position:absolute;
    }
    .selectMultiple >div .arrow:before,.selectMultiple >div .arrow:after {
    	content:'';
    	position:absolute;
    	display:block;
    	width:2px;
    	height:8px;
    	border-bottom:8px solid #99A3BA;
    	top:43%;
    	transition:all .3s ease;
    }
    .selectMultiple >div .arrow:before {
    	right:12px;
    	-webkit-transform:rotate(-130deg);
    	transform:rotate(-130deg);
    }
    .selectMultiple >div .arrow:after {
    	left:9px;
    	-webkit-transform:rotate(130deg);
    	transform:rotate(130deg);
    }
    .selectMultiple >div span {
    	color:#99A3BA;
    	display:block;
    	position:absolute;
    	left:12px;
    	cursor:pointer;
    	top:8px;
    	line-height:28px;
    	transition:all .3s ease;
    }
    .selectMultiple >div span.hide {
    	opacity:0;
    	visibility:hidden;
    	-webkit-transform:translate(-4px,0);
    	transform:translate(-4px,0);
    }
    .selectMultiple >div a {
    	position:relative;
    	padding:0 24px 6px 8px;
    	line-height:28px;
    	color:#1E2330;
    	display:inline-block;
    	vertical-align:top;
    	margin:0 6px 0 0;
    }
    .selectMultiple >div a em {
    	font-style:normal;
    	display:block;
    	white-space:nowrap;
    }
    .selectMultiple >div a:before {
    	content:'';
    	left:0;
    	top:0;
    	bottom:6px;
    	width:100%;
    	position:absolute;
    	display:block;
    	background:rgba(228,236,250,0.7);
    	z-index:-1;
    	border-radius:4px;
    }
    .selectMultiple >div a i {
    	cursor:pointer;
    	position:absolute;
    	top:0;
    	right:0;
    	width:24px;
    	height:28px;
    	display:block;
    }
    .selectMultiple >div a i:before,.selectMultiple >div a i:after {
    	content:'';
    	display:block;
    	width:2px;
    	height:10px;
    	position:absolute;
    	left:50%;
    	top:50%;
    	background:#4D18FF;
    	border-radius:1px;
    }
    .selectMultiple >div a i:before {
    	-webkit-transform:translate(-50%,-50%) rotate(45deg);
    	transform:translate(-50%,-50%) rotate(45deg);
    }
    .selectMultiple >div a i:after {
    	-webkit-transform:translate(-50%,-50%) rotate(-45deg);
    	transform:translate(-50%,-50%) rotate(-45deg);
    }
    .selectMultiple >div a.notShown {
    	opacity:0;
    	transition:opacity .3s ease;
    }
    .selectMultiple >div a.notShown:before {
    	width:28px;
    	transition:width 0.45s cubic-bezier(0.87,-0.41,0.19,1.44) 0.2s;
    }
    .selectMultiple >div a.notShown i {
    	opacity:0;
    	transition:all .3s ease .3s;
    }
    .selectMultiple >div a.notShown em {
    	opacity:0;
    	-webkit-transform:translate(-6px,0);
    	transform:translate(-6px,0);
    	transition:all .4s ease .3s;
    }
    .selectMultiple >div a.notShown.shown {
    	opacity:1;
    }
    .selectMultiple >div a.notShown.shown:before {
    	width:100%;
    }
    .selectMultiple >div a.notShown.shown i {
    	opacity:1;
    }
    .selectMultiple >div a.notShown.shown em {
    	opacity:1;
    	-webkit-transform:translate(0,0);
    	transform:translate(0,0);
    }
    .selectMultiple >div a.remove:before {
    	width:28px;
    	transition:width 0.4s cubic-bezier(0.87,-0.41,0.19,1.44) 0s;
    }
    .selectMultiple >div a.remove i {
    	opacity:0;
    	transition:all .3s ease 0s;
    }
    .selectMultiple >div a.remove em {
    	opacity:0;
    	-webkit-transform:translate(-12px,0);
    	transform:translate(-12px,0);
    	transition:all .4s ease 0s;
    }
    .selectMultiple >div a.remove.disappear {
    	opacity:0;
    	transition:opacity .5s ease 0s;
    }
    .selectMultiple >ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    	font-size:16px;
    	z-index:1;
    	position:absolute;
    	top:100%;
    	left:0;
    	right:0;
    	visibility:hidden;
    	opacity:0;
    	border-radius:8px;
    	-webkit-transform:translate(0,20px) scale(0.8);
    	transform:translate(0,20px) scale(0.8);
    	-webkit-transform-origin:0 0;
    	transform-origin:0 0;
    	-webkit-filter:drop-shadow(0 12px 20px rgba(22,42,90,0.08));
    	filter:drop-shadow(0 12px 20px rgba(22,42,90,0.08));
    	transition:all 0.4s ease,-webkit-transform 0.4s cubic-bezier(0.87,-0.41,0.19,1.44),-webkit-filter 0.3s ease 0.2s;
    	transition:all 0.4s ease,transform 0.4s cubic-bezier(0.87,-0.41,0.19,1.44),filter 0.3s ease 0.2s;
    	transition:all 0.4s ease,transform 0.4s cubic-bezier(0.87,-0.41,0.19,1.44),filter 0.3s ease 0.2s,-webkit-transform 0.4s cubic-bezier(0.87,-0.41,0.19,1.44),-webkit-filter 0.3s ease 0.2s;
    }
    .selectMultiple >ul li {
    	color:#1E2330;
    	background:#fff;
    	padding:12px 16px;
    	cursor:pointer;
    	overflow:hidden;
    	position:relative;
    	transition:background .3s ease,color .3s ease,opacity .5s ease .3s,border-radius .3s ease .3s,-webkit-transform .3s ease .3s;
    	transition:background .3s ease,color .3s ease,transform .3s ease .3s,opacity .5s ease .3s,border-radius .3s ease .3s;
    	transition:background .3s ease,color .3s ease,transform .3s ease .3s,opacity .5s ease .3s,border-radius .3s ease .3s,-webkit-transform .3s ease .3s;
    }
    .selectMultiple >ul li:first-child {
    	border-radius:8px 8px 0 0;
    }
    .selectMultiple >ul li:first-child:last-child {
    	border-radius:8px;
    }
    .selectMultiple >ul li:last-child {
    	border-radius:0 0 8px 8px;
    }
    .selectMultiple >ul li:last-child:first-child {
    	border-radius:8px;
    }
    .selectMultiple >ul li:hover {
    	background:#4D18FF;
    	color:#fff;
    }
    .selectMultiple >ul li:after {
    	content:'';
    	position:absolute;
    	top:50%;
    	left:50%;
    	width:6px;
    	height:6px;
    	background:rgba(0,0,0,0.4);
    	opacity:0;
    	border-radius:100%;
    	-webkit-transform:scale(1,1) translate(-50%,-50%);
    	transform:scale(1,1) translate(-50%,-50%);
    	-webkit-transform-origin:50% 50%;
    	transform-origin:50% 50%;
    }
    .selectMultiple >ul li.beforeRemove {
    	border-radius:0 0 8px 8px;
    }
    .selectMultiple >ul li.beforeRemove:first-child {
    	border-radius:8px;
    }
    .selectMultiple >ul li.afterRemove {
    	border-radius:8px 8px 0 0;
    }
    .selectMultiple >ul li.afterRemove:last-child {
    	border-radius:8px;
    }
    .selectMultiple >ul li.remove {
    	-webkit-transform:scale(0);
    	transform:scale(0);
    	opacity:0;
    }
    .selectMultiple >ul li.remove:after {
    	-w.........完整代码请登录后点击上方下载按钮下载查看