李俊霏

今天小编跟大家讲解下有关一款纯css3实现简单的checkbox复选框和radio单选框 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关一款纯css3实现简单的checkbox复选框和radio单选框 的相关资料，希望小伙伴们看了有所帮助。

　　昨天为大家分享了一款很炫的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按钮 谢谢阅读 希望能帮到大家 请继续关注AIDI 我们会努力分享更多优秀的文章。

来源：爱蒂网