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

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

代码语言：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;
    	cu.........完整代码请登录后点击上方下载按钮下载查看