純css3怎么實(shí)現(xiàn)簡(jiǎn)單的checkbox復(fù)選框和radio單選框

這篇文章主要介紹“純css3怎么實(shí)現(xiàn)簡(jiǎn)單的checkbox復(fù)選框和radio單選框”，在日常操作中，相信很多人在純css3怎么實(shí)現(xiàn)簡(jiǎn)單的checkbox復(fù)選框和radio單選框問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”純css3怎么實(shí)現(xiàn)簡(jiǎn)單的checkbox復(fù)選框和radio單選框”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

　　昨天為大家分享了一款很炫的checkbox復(fù)選框和radio單選框，今天再給大家?guī)硪豢詈?jiǎn)單實(shí)用的checkbox復(fù)選框和radio單選框。界面清淅、舒服。先給大家來張效果圖：

　　實(shí)現(xiàn)代碼：

　　html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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.         }  

到此，關(guān)于“純css3怎么實(shí)現(xiàn)簡(jiǎn)單的checkbox復(fù)選框和radio單選框”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！