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

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单选框”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！