主要根据表单checkbox的checked属性来控制开关的状态和样式的切换。效果如下：

设置一个checkbox表单，利用visibility属性隐藏，然后使用label元素来显示开关按钮的效果。

注意：一个checkbox与其绑定的label，其id="switch"与for="switch"这二个名称要一致。

html设置如下：

<div class="wrap">
	<input type="checkbox" id="switch" checked />
	<label for="switch">
		<span class="txt" turnOn="On" turnOff="Off"></span>
	</label>
</div>

css部分：

<style>
	input[type=checkbox] {
		height: 0;
		width: 0;
		visibility: hidden;
	}
	label{
		cursor: pointer;
		width: 110px;
		height: 50px;
		background: grey;
		display: block;
		border-radius: 50px;
		position: relative;
	}
	label:after,
	.txt::before,
	.txt::after {
		content: '';
		position: absolute;
		top: 5px;
		left: 5px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}
	label:after{
		background: #fff;
		border-radius: 50%;
		transition: 0.3s;
	}
	.txt::before,
	.txt::after {
		display: block;
		color: #fff;
		font-weight: bold;
		box-sizing: border-box;
	}
	.txt::before {
		content: attr(turnOn);
		color: #fff;
	}
	.txt::after {
		content: attr(turnOff);
		color: #ccc;
		right: 5px;
		left: inherit;
	}
	input:checked+label {
		background: #20c997;
	}
	label:active:after {
		width: 40%;
	}
	input:checked+label:after {
		left: calc(100% - 5px);
		transform: translateX(-100%);
	}
</style>

链接: https://www.fly63.com/article/detial/11466