组件 开关 switch

switch

html

<input type="checkbox" class="switch">
<input type="checkbox" class="switch switch-info" />
<input type="checkbox" class="switch switch-danger" />
 <input type="checkbox" class="switch switch-warm" />
 <input type="checkbox" class="switch switch-primary" />

css

input[type="checkbox"].switch{
	outline:none;
	appearance:none;
	 -webkit-appearance: none;
    -moz-appearance: none;
	position:relative;
	width:2.8rem;
	height:1.52rem;
	border:1px solid #ccc;
	backgroud-color:#ccc;
	border-radius:0.7rem;
}
input[type="checkbox"].switch::after{
	content:'';
	display:inline-block;
	width:1.4rem;
	height:1.4rem;
	border-radius:50%;
	background-color:#fff;
	box-shadow:0 0 2px #999;
	transition:left 0.1s;
	position:absolute;
	top:0;
	left:0;
}
input[type="checkbox"].switch:checked{
	background-color: #32ba58;
}
 /* 
    默认为不选中状态
    input[type="checkbox"]被选中时，伪元素显示下面样式 位置发生变化
  */
input[type="checkbox"].switch:checked::after{
	position:absolute;
	top:0;
	left:50%
}
input[type=checkbox].switch-info.switch:checked{
    background-color: #409eff;
}
input[type=checkbox].switch-danger.switch:checked{
    background-color: rgb(255, 73, 73);
}
input[type=checkbox].switch-warm.switch:checked{
    background-color: hsl(51, 93%, 54%);
}
input[type=checkbox].switch-primary.switch:checked{
    background-color: #409eff;
}
input[type=checkbox].switch-primary.switch{
    background-color: rgb(255, 73, 73);
}