昨天为大家分享了一款很炫的checkbox复选框和radio单选框，今天再给大家带来一款简单实用的checkbox复选框和radio单选框。界面清淅、舒服。先给大家来张效果图：
实现代码：
html代码：
XML/HTML Code复制内容到剪贴板
<divclass="frame"><inputchecked="checked"id="radio_1"name="radio"type="radio"><labelclass="radio"for="radio_1"><iclass="fafa-times"></i></label><inputid="radio_2"name="radio"type="radio"><labelclass="radio"for="radio_2"><iclass="fafa-times"></i></label><inputid="radio_3"name="radio"type="radio"><labelclass="radio"for="radio_3"><iclass="fafa-times"></i></label><inputid="radio_4"name="radio"type="radio"><labelclass="radio"for="radio_4"><iclass="fafa-times"></i></label><inputid="radio_5"name="radio"type="radio"><labelclass="radio"for="radio_5"><iclass="fafa-times"></i></label></div><divclass="frame"><inputchecked="checked"id="check_1"name="check"type="checkbox"><labelclass="check"for="check_1"><iclass="fafa-check"></i></label><inputid="check_2"name="check"type="checkbox"><labelclass="check"for="check_2"><iclass="fafa-check"></i></label><inputid="check_3"name="check"type="checkbox"><labelclass="check"for="check_3"><iclass="fafa-check"></i></label><inputid="check_4"name="check"type="checkbox"><labelclass="check"for="check_4"><iclass="fafa-check"></i></label><inputid="check_5"name="check"type="checkbox"><labelclass="check"for="check_5"><iclass="fafa-check"></i></label></div> css3代码：
CSS Code复制内容到剪贴板
form{width:100vw;height:100vh;display:flex;flex-flow:columnwrap;justify-content:center;align-items:center;}form.frame{display:flex;flex-flow:rownowrap;}form.frameinput{display:none;}form.framelabel{cursor:pointer;position:relative;width:30px;height:30px;margin:10px;background:#8ABA56;transition:all0.3sease-in-out;font-size:12pt;color:#FFF;-webkit-font-smoothing:antialiased;}form.framelabel.radio{border-radius:100%;}form.framelabel.check{border-radius:5px;}form.framelabel.fa{position:absolute;top:0;left:0;rightright:0;bottombottom:0;opacity:0;-webkit-transform:scale(0);transition:all0.3sease-in-out;line-height:30px;text-align:center;}form.frameinput:checked+label{background:#678b40;}form.frameinput:checked+label.fa{opacity:1;-webkit-transform:scale(1);} 好了。复制上面的html代码和css代码。轻松搞定一款漂亮的checkbox、radio按钮，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。
