* {
padding:0;
margin:0;
}
li {
list-style:none;
cursor:pointer;
position:relative;
}
.selection-container {
height:350px;
margin:10px;
}
.select-box {
width:250px;
height:100%;
float:left;
border:1px solid #ebeef5;
border-radius:4px;
}
.arrows-box {
width:110px;
height:100%;
float:left;
position:relative;
}
.select-content {
width:100%;
height:320px;
overflow-y:auto;
overflow-x:hidden;
}
.select-box-title {
height:40px;
line-height:40px;
font-size:16px;
font-family:"微软雅黑";
padding:0 6%;
display:flex;
align-items:center;
position:relative;
width:100%;
background:#f5f7fa;
border-bottom:1px solid #ebeef5;
box-sizing:border-box;
color:#000;
}
/*.checkbox-all {
float:left;
}
*/
.select-box-title label:before {
left:-14px!important;
top:4px!important;
}
.select-box-title label:after {
left:-10px!important;
top:5px!important;
}
.checkboxs {
vertical-align:middle;
}
.unselect-ul {
padding:10px 0;
}
.selected-ul {
padding:10px 0;
}
.select-content li {
padding:5px 15px;
font-size:12px;
font-family:"微软雅黑";
}
.select-box input[type='checkbox'] {
position:absolute;
left:13px;
top:3px;
width:20px;
height:20px;
opacity:0;
}
.select-box label {
position:absolute;
left:30px;
top:9px;
height:20px;
line-height:20px;
}
.select-box span {
padding-left:20px;
}
.select-box label:before {
content:'';
position:absolute;
left:-14px;
top:-3px;
width:12px;
height:12px;
border:1px solid #ddd;
border-radius:5px;
transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
}
.select-box label:after {
content:'';
position:absolute;
left:-10px;
top:-2px;
width:4px;
height:8px;
border:0;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
background:#fff;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
}
.select-box input[type='checkbox']:checked + label:before {
background:#00A0E8;
border-color:#00A0E8;
}
.select-box input[type='checkbox']:checked + label:after {
background:#00A0E8;
}
.arrow-btns {
width:100%;
position:absolute;
top:50%;
margin-top:-45px;
}
.btn-cursor {
background-color:#409eff !important;
border:1px solid #409EFF !important;
transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
}
.btn-cursor svg {
fill:#fff !important;
transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
}
/*.btn-cursor {
cursor:not-allowed !important;
}
*/
.arrow-btn {
display:block;
position:relative;
width:40px;
height:40px;
border-radius:25px;
background:#eee;
margin:0 auto 5px;
cursor:pointer;
border:1px solid #dcdfe6;
background-color:#f5f7fa;
color:#c0c4cc;
outline:none;
}
.arrow-btn svg {
padding:11px;
width:17px;
height:17px;
color:white;
fill:#C0C4CC;
}
这款穿梭框是对照着element-ui做的。功能基本一样,样式大部分相似,欢迎选购。选择左侧列表,右移按钮自动高亮,点击btn按钮后内容移动到右边穿梭框里面。两个按钮我用的svg 使用的童鞋可以把两个按钮换成图片或者icon 。