效果如下:
代码如下:
HTML:
<input class='switch-component' type='checkbox'>
CSS(进行了浏览器的前缀兼容):
.switch-component {
position: relative;
width: 60px;
height: 30px;
background-color: #dadada;
border: none;
outline: none;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
-os-border-radius: 30px;
-webkit-appearance: none; /*取消checkbox的默认样式*/
-moz-appearance: none;
-o-appearance: none;
-os-appearance: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-os-transition: all 0.2s ease;
}
.switch-component::after {
content: '';
position: absolute;
t