CSS简易input之checkbox的switch开关

input[type='checkbox'][switch]{ -webkit-appearance:none; -moz-appearance: none; display:inline-block; width:50px; height:25px; border-radius:25%/50%; border:1px solid #cccccc; position:relative; background:#ffffff; outline:0; transition: all ease .3s; user-select:none; }
input[type='checkbox'][switch]:before{ content:''; display:block; position:absolute; height:100%; width:50%;  top:0; left:0; right:auto; border:0!important; background:#efefef; border-radius:50%; transition: all ease .3s;}
input[type='checkbox'][switch]:after{ display:none!important; }
input[type='checkbox'][switch]:checked{ background:#64bd63; }
input[type='checkbox'][switch]:checked:before{ right:0; left:auto; background:#ffffff; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08); transform:scale(1.1,1.1); }

input开关

修改开关大小,只需要修改input自身的宽度和高度即可,宽:高=2:1

-----

调用

<input type="checkbox" switch checked />