纯CSS3 + HTLM 实现单选按钮 和多选框

纯CSS3 + HTLM 实现单选按钮 和多选框

.radio{ transition:all .3s ease; width:22px; position:relative; vertical-align:middle; height:22px; border-radius:22px; background:#fff; border:1px solid #ddd; -webkit-appearance:none; outline:none;}
.radio:after{ width:12px;transition:all .3s ease;transform:scale(0); height:12px; border-radius:12px; background:#4cd964; position:absolute; left:4px; top:4px; content:'';}
.radio:checked{ border-color:#4cd964;}
.radio:checked:after{transform:scale(1);}

.checkbox{ transition:all .3s ease; width:35px; position:relative; vertical-align:middle; height:22px; border-radius:22px; background:#dddddd; -webkit-appearance:none; border:0px; outline:none;}
.checkbox:after{ width:18px;transition:all .3s ease;transform:translateX(0px); height:18px; border-radius:18px; background:#fff; box-shadow:#b2b2b2 0 0 8px; position:absolute; left:1px; top:2px; content:'';}
.checkbox:checked{ background:#4cd964;}
.checkbox:checked:after{ transform:translateX(15px);}

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

<input type="radio" name="paytype" class="radio" />

<input type="radio" name="paytype" class="radio" />