CSS中怎么實(shí)現(xiàn)一個(gè)頁面復(fù)選框

本篇文章給大家分享的是有關(guān)CSS中怎么實(shí)現(xiàn)一個(gè)頁面復(fù)選框，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

第一步 分拆選中/未選中

<input type="checkbox">本身的樣式不能修改，所以我們必須借助的幫助；實(shí)現(xiàn)選中/未選中區(qū)分，那自然就要用到偽類:checked；選擇器一定是從外到內(nèi)、從前到后的，沒法選擇父級(jí)元素，所以不能用<label>去包<input>，那么最終布局就只能是：

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

1. <div>   

2.     <input type="checkbox" name="q[]" id="q1" />   

3.     <label for="q1">小寶3225</label>   

4.     <input type="checkbox" name="q[]" id="q2" />   

5.     <label for="q2">王老白白白</label>   

6.     <input type="checkbox" name="q[]" id="q3" />   

7.     <label for="q3">空夫31</label>   

8.     <input type="checkbox" name="q[]" id="q4" />   

9.     <label for="q4">谷大白話</label>   

10.     <input type="checkbox" name="q[]" id="q5" />   

11.     <label for="q5">Meathill</label>   

12.     <input type="checkbox" name="q[]" id="q6" />   

13.     <label for="q6">一毛不拔大師</label>   

14. </div>  

很簡(jiǎn)單哈，不解釋了。CSS3新增了“下一節(jié)點(diǎn)”選擇器 +，用來選擇某節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)，結(jié)合:checked偽類就可以將選中的<input>和它臨近的<label>通過改變order屬性移到前面去：

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

1. #container {   

2.   display:flex;   

3.   flex-direction:row;   

4.   flex-wrap:wrap;   

5. }   

6. #container input,   

7. #container label {   

8.   order: 2; //所有選項(xiàng)、label順序?yàn)?   

9. }   

10. input[type=checkbox]:checked,   

11. input[type=checkbox]:checked + label {   

12.   order: 0; // 越小越靠前   

13. }  

不過這樣只是把選中的內(nèi)容提前，視覺上沒有真正的分割。所以我決定再加入一根分割線，上面是選中的，下面是未選的。這個(gè)時(shí)候我們需要用到 ~ 這個(gè)選擇器，選擇某節(jié)點(diǎn)后面的節(jié)點(diǎn)：

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

1. hr {   

2.   display:none; // 默認(rèn)情況下，沒選任何選項(xiàng)，分割線隱藏   

3.   order: 1; // 分割線順序?yàn)?   

4.   width:100%; // 保證獨(dú)霸一行   

5. }   

6. input[type=checkbox]:checked ~ hr {   

7.   display:block; // 有選項(xiàng)被選中后才會(huì)顯示分割線   

8. }  

http://jsfiddle.net/meathill/fPN3p/5/embedded/result/

這樣基礎(chǔ)功能實(shí)現(xiàn)了。不過視覺上，排版仍然不整齊，選中的選項(xiàng)和未選中的選項(xiàng)區(qū)分不算太明顯，所以下一步我準(zhǔn)備美化下checkbox。
第二步，美化CHECKBOX

做法與前面類似，也要用到CSS3新增的選擇器。前面為了實(shí)現(xiàn)<label>提前，沒有用它包裹<input>，所以在選項(xiàng)很多很長(zhǎng)導(dǎo)致?lián)Q行的時(shí)候，可能出現(xiàn)復(fù)選框和標(biāo)簽脫離的尷尬狀況。好在復(fù)選框的價(jià)值可以用別的樣式取代，所以先把小方框隱藏起來，轉(zhuǎn)而將<label>作為操作目標(biāo)，再來點(diǎn)邊框底色圓角（參考自Bootstrap 3），就可以了：

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

1. input[type=checkbox] {   

2.   display: none;   

3. }   

4. label {   

5.   min-width: 120px;   

6.   border: 1px solid #CCC;   

7.   padding: 2px 8px;   

8.   text-align: center;   

9.   margin: 0 5px 5px 0;   

10.   background: #FFF;   

11.   color: #333;   

12.   border-radius: 3px;   

13.   box-sizing: border-box;   

14. }   

15. label:hover {   

16.   border-color: #ADADAD;   

17.   background: #EBEBEB;   

18.   cursor: pointer;   

19. }   

20. input[type=checkbox]:checked + label {   

21.   order: 0;   

22.   background-color: #5cb85c;   

23.   border-color: #4cae4c;   

24.   color: #FFF;   

25. }   

26. input[type=checkbox]:checked + label:hover {   

27.   background-color: #47a447;   

28.   border-color: #398439;   

29. }  

以上就是CSS中怎么實(shí)現(xiàn)一個(gè)頁面復(fù)選框，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。