CSS中怎么实现一个页面复选框

  

很简单哈，不解释了。CSS3新增了“下一节点”选择器 +，用来选择某节点的下一个节点，结合:checked伪类就可以将选中的和它临近的通过改变order属性移到前面去：

CSS Code复制内容到剪贴板

1. #container {   

2.   display:flex;   

3.   flex-direction:row;   

4.   flex-wrap:wrap;   

5. }   

6. #container input,   

7. #container label {   

8.   order: 2; //所有选项、label顺序为2   

9. }   

10. input[type=checkbox]:checked,   

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

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

13. }  

不过这样只是把选中的内容提前，视觉上没有真正的分割。所以我决定再加入一根分割线，上面是选中的，下面是未选的。这个时候我们需要用到 ~ 这个选择器，选择某节点后面的节点：

CSS Code复制内容到剪贴板

1. hr {   

2.   display:none; // 默认情况下，没选任何选项，分割线隐藏   

3.   order: 1; // 分割线顺序为1   

4.   width:100%; // 保证独霸一行   

5. }   

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

7.   display:block; // 有选项被选中后才会显示分割线   

8. }  

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

这样基础功能实现了。不过视觉上，排版仍然不整齐，选中的选项和未选中的选项区分不算太明显，所以下一步我准备美化下checkbox。
第二步，美化CHECKBOX

做法与前面类似，也要用到CSS3新增的选择器。前面为了实现提前，没有用它包裹，所以在选项很多很长导致换行的时候，可能出现复选框和标签脱离的尴尬状况。好在复选框的价值可以用别的样式取代，所以先把小方框隐藏起来，转而将作为操作目标，再来点边框底色圆角（参考自Bootstrap 3），就可以了：

CSS Code复制内容到剪贴板

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中怎么实现一个页面复选框，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

网页标题：CSS中怎么实现一个页面复选框
浏览路径：http://cdiso.cn/article/jhieos.html