LESS 自定义 switch 选择器样式

发表于 2019-08-09 10:42:15   |   下载附件   |   字体:
lessswitch选择器样式自定义switch样式checkbox伪装switch样式

CSS 代码请在上方下载附件

Less 代码:

/* 
	switch盒子 
	使用参数:宽,高,选中颜色值
	使用实例:.toggle-switch(68px,24px,#0092ff);
*/
.toggle-switch (@w:68px,@h:24px,@c:#0092ff){

	display: inline-block; position: relative;
	width: @w; height: @h; border-radius: 5px;

	input[type="checkbox"] {
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0px;
		filter: alpha(opacity=0);
		opacity: 0;
	}

	/*默认样式*/
	.toggle-switch-content {
		width: 100%; height: 100%; display: table; border: 1px #e6e5ea solid; background: #f5f5f7;
		border-radius: @h;
	}
	.switch-true,
	.switch-false {
		width: @h; height: @h; border-radius: @h;
	}
	.switch-true {
		float: right; background: #FFF; box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.3); display: none; 
	}
	.switch-false {
		float: left; background: #FFF; box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.1);
	}

	/*选中样式*/
	input[type="checkbox"]:checked + .toggle-switch-content {
		background: @c; border: 1px @c solid;
	}
	input[type="checkbox"]:checked + .toggle-switch-content .switch-true {
		display: block;
	}
	input[type="checkbox"]:checked + .toggle-switch-content .switch-false {
		display: none;
	}

}


HTML 代码:

<div class="toggle-switch">
    <input type="checkbox"/>
    <div class="toggle-switch-content">
        <div class="switch-true"><i class="img-wh14 img-switch-true"></i></div>
        <div class="switch-false"><i class="img-wh14 img-switch-false"></i></div>
    </div>
</div>