Html
    Css
    Js

    
                        
* {
	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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.1
 立即下载

基于elementui的穿梭框

这款穿梭框是对照着element-ui做的。功能基本一样,样式大部分相似,欢迎选购。选择左侧列表,右移按钮自动高亮,点击btn按钮后内容移动到右边穿梭框里面。两个按钮我用的svg  使用的童鞋可以把两个按钮换成图片或者icon 。

0