一. ie版本
Css
.iSwitch{
position: relative;
display: inline-block;
width: 36px;
height: 18px;
border-radius: 15px;
background: #dcdcdc;
border:1px solid #dcdcdc;
box-shadow: 0 0 5px #dcdcdc;
overflow: hidden;
vertical-align: middle;
}
.iSwitch input{
visibility: hidden;
}
.iSwitch i{
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 50%;
height: 100%;
border-radius: 100%;
background: #fff;
}
.iSwitch i::before{
content: " ";
display: none;
width: 200%;
height: 100%;
border-radius: 25%;
background: #61cafd;
}
.iSwitch i::after{
content: " ";
position: absolute;
left: 0;
top: 0;
z-index: 2;
display: inline-block;
width: 100%;
height: 100%;
border-radius: 100%;
background: #fff;
}
.iSwitch input:checked + i{
transform:translateX(100%);
-webkit-transform:translateX(100%);
}
.iSwitch input:checked + i:before{
display: inline-block;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
Js
<label class="iSwitch">
<input type="checkbox"/>
<i></i>
</label>
二. Chrome或火狐
Css
input[type='checkbox']{
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
width: 40px;
height: 20px;
background: #ccc;
border-radius: 10px;
transition: border-color .3s, background-color .3s;
}
input[type='checkbox']::after {
content: '';
display: inline-block;
width: 1rem;
height:1rem;
border-radius: 50%;
background: #fff;
box-shadow: 0, 0, 2px, #999;
transition:.4s;
top: 2px;
position: absolute;
left: 2px;
}
input[type='checkbox']:checked {
background: rgb(5, 126, 238);
}
/* 当input[type=checkbox]被选中时:伪元素显示下面样式 位置发生变化 */
input[type='checkbox']:checked::after {
content: '';
position: absolute;
left: 55%;
top: 2px;
}
Js
<input type="checkbox"/>