纯CSS实现的仿iOS开关样式

参考 WeUI 的开关样式实现

1，复制下面的代码到相应的位置

 .switch {
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     position: relative;
     width: 52px;
     height: 32px;
     outline: none !important;
     border-radius: 16px;
     border: 1px;
     box-sizing: border-box;
     background-color: #DFDFDF;
     transition: background-color .1s, border .1s;
 }

 .switch::before {
     content: " ";
     position: absolute;
     width: 52px;
     height: 32px;
     border: 1px solid #DFDFDF;
     border-radius: 16px;
     background-color: #FFFFFF;
     transition: transform .35s cubic-bezier(0.45, 1, 0.4, 1);
 }

 .switch::after {
     content: " ";
     position: absolute;
     top: 1px;
     left: 1px;
     width: 30px;
     height: 30px;
     border-radius: 15px;
     background-color: #FFFFFF;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
     transition: transform .35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
 }

 .switch:checked {
     border-color: #1AAD19;
     background-color: #1AAD19;
 }

 .switch:checked::before {
     transform: scale(0);
 }

 .switch:checked::after {
     transform: translateX(20px);
 }

2，为checkbox引用样式

<input class="switch" type="checkbox" />