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