纯css3怎么实现简单的checkbox复选框和radio单选框

这篇文章主要介绍“纯css3怎么实现简单的checkbox复选框和radio单选框”，在日常操作中，相信很多人在纯CSS3怎么实现简单的checkbox复选框和radio单选框问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”纯css3怎么实现简单的checkbox复选框和radio单选框”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

　　实现代码：

　　html代码：

XML/html Code复制内容到剪贴板

1. <div class="frame">  

2.         <input checked="checked" id="radio_1" name="radio" type="radio">  

3.         <label class="radio" for="radio_1">  

4.             <i class="fa fa-times"></i>  

5.         </label>  

6.         <input id="radio_2" name="radio" type="radio">  

7.         <label class="radio" for="radio_2">  

8.             <i class="fa fa-times"></i>  

9.         </label>  

10.         <input id="radio_3" name="radio" type="radio">  

11.         <label class="radio" for="radio_3">  

12.             <i class="fa fa-times"></i>  

13.         </label>  

14.         <input id="radio_4" name="radio" type="radio">  

15.         <label class="radio" for="radio_4">  

16.             <i class="fa fa-times"></i>  

17.         </label>  

18.         <input id="radio_5" name="radio" type="radio">  

19.         <label class="radio" for="radio_5">  

20.             <i class="fa fa-times"></i>  

21.         </label>  

22.     </div>  

23.     <div class="frame">  

24.         <input checked="checked" id="check_1" name="check" type="checkbox">  

25.         <label class="check" for="check_1">  

26.             <i class="fa fa-check"></i>  

27.         </label>  

28.         <input id="check_2" name="check" type="checkbox">  

29.         <label class="check" for="check_2">  

30.             <i class="fa fa-check"></i>  

31.         </label>  

32.         <input id="check_3" name="check" type="checkbox">  

33.         <label class="check" for="check_3">  

34.             <i class="fa fa-check"></i>  

35.         </label>  

36.         <input id="check_4" name="check" type="checkbox">  

37.         <label class="check" for="check_4">  

38.             <i class="fa fa-check"></i>  

39.         </label>  

40.         <input id="check_5" name="check" type="checkbox">  

41.         <label class="check" for="check_5">  

42.             <i class="fa fa-check"></i>  

43.         </label>  

44.     </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. fORM   

2.         {   

3.             width: 100vw;   

4.             height: 100vh;   

5.             display: flex;   

6.             flex-flow: column wrap;   

7.             justify-content: center;   

8.             align-items: center;   

9.         }   

10.         form .frame   

11.         {   

12.             display: flex;   

13.             flex-flow: row nowrap;   

14.         }   

15.         form .frame input   

16.         {   

17.             display: none;   

18.         }   

19.         form .frame label   

20.         {   

21.             cursor: pointer;   

22.             position: relative;   

23.             width: 30px;   

24.             height: 30px;   

25.             margin: 10px;   

26.             background: #8ABA56;   

27.             transition: all 0.3s ease-in-out;   

28.             font-size: 12pt;   

29.             color: #FFF;   

30.             -WEBkit-font-smoothing: antialiased;   

31.         }   

32.         form .frame label.radio   

33.         {   

34.             border-radius: 100%;   

35.         }   

36.         form .frame label.check   

37.         {   

38.             border-radius: 5px;   

39.         }   

40.         form .frame label .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: all 0.3s ease-in-out;   

50.             line-height: 30px;   

51.             text-align: center;   

52.         }   

53.         form .frame input:checked + label   

54.         {   

55.             background: #678b40;   

56.         }   

57.         form .frame input:checked + label .fa   

58.         {   

59.             opacity: 1;   

60.             -webkit-transform: scale(1);   

61.         }  

到此，关于“纯css3怎么实现简单的checkbox复选框和radio单选框”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！