一款纯css3如何实现简单的checkbox复选框和radio单选框

互联网
暖和的春天，万物复苏，运河水像刚刚清醒的小姑娘，浑身布满了活力，唱着新歌，向前奔去。

　　昨天为大家分享了一款很炫的checkbox复选框和radio单选框，今天再给大家带来一款简单实用的checkbox复选框和radio单选框。界面清淅、舒服。先给大家来张效果图：

　　实现代码：

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="frame">
  2. <inputchecked="checked"id="radio_1"name="radio"type="radio">
  3. <labelclass="radio"for="radio_1">
  4. <iclass="fafa-times"></i>
  5. </label>
  6. <inputid="radio_2"name="radio"type="radio">
  7. <labelclass="radio"for="radio_2">
  8. <iclass="fafa-times"></i>
  9. </label>
  10. <inputid="radio_3"name="radio"type="radio">
  11. <labelclass="radio"for="radio_3">
  12. <iclass="fafa-times"></i>
  13. </label>
  14. <inputid="radio_4"name="radio"type="radio">
  15. <labelclass="radio"for="radio_4">
  16. <iclass="fafa-times"></i>
  17. </label>
  18. <inputid="radio_5"name="radio"type="radio">
  19. <labelclass="radio"for="radio_5">
  20. <iclass="fafa-times"></i>
  21. </label>
  22. </div>
  23. <divclass="frame">
  24. <inputchecked="checked"id="check_1"name="check"type="checkbox">
  25. <labelclass="check"for="check_1">
  26. <iclass="fafa-check"></i>
  27. </label>
  28. <inputid="check_2"name="check"type="checkbox">
  29. <labelclass="check"for="check_2">
  30. <iclass="fafa-check"></i>
  31. </label>
  32. <inputid="check_3"name="check"type="checkbox">
  33. <labelclass="check"for="check_3">
  34. <iclass="fafa-check"></i>
  35. </label>
  36. <inputid="check_4"name="check"type="checkbox">
  37. <labelclass="check"for="check_4">
  38. <iclass="fafa-check"></i>
  39. </label>
  40. <inputid="check_5"name="check"type="checkbox">
  41. <labelclass="check"for="check_5">
  42. <iclass="fafa-check"></i>
  43. </label>
  44. </div>

　　css3代码：

CSS Code复制内容到剪贴板
  1. form
  2. {
  3. width:100vw;
  4. height:100vh;
  5. display:flex;
  6. flex-flow:columnwrap;
  7. justify-content:center;
  8. align-items:center;
  9. }
  10. form.frame
  11. {
  12. display:flex;
  13. flex-flow:rownowrap;
  14. }
  15. form.frameinput
  16. {
  17. display:none;
  18. }
  19. form.framelabel
  20. {
  21. cursor:pointer;
  22. position:relative;
  23. width:30px;
  24. height:30px;
  25. margin:10px;
  26. background:#8ABA56;
  27. transition:all0.3sease-in-out;
  28. font-size:12pt;
  29. color:#FFF;
  30. -webkit-font-smoothing:antialiased;
  31. }
  32. form.framelabel.radio
  33. {
  34. border-radius:100%;
  35. }
  36. form.framelabel.check
  37. {
  38. border-radius:5px;
  39. }
  40. form.framelabel.fa
  41. {
  42. position:absolute;
  43. top:0;
  44. left:0;
  45. rightright:0;
  46. bottombottom:0;
  47. opacity:0;
  48. -webkit-transform:scale(0);
  49. transition:all0.3sease-in-out;
  50. line-height:30px;
  51. text-align:center;
  52. }
  53. form.frameinput:checked+label
  54. {
  55. background:#678b40;
  56. }
  57. form.frameinput:checked+label.fa
  58. {
  59. opacity:1;
  60. -webkit-transform:scale(1);
  61. }

　　好了。复制上面的html代码和css代码。轻松搞定一款漂亮的checkbox、radio按钮，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

以上就是一款纯css3如何实现简单的checkbox复选框和radio单选框。人无我有，人有我优，人优我奇。更多关于一款纯css3如何实现简单的checkbox复选框和radio单选框请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例