温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-08-07 17:02:53 来源:亿速云 阅读:140 作者:Leah 栏目:web开发

本篇文章给大家分享的是有关CSS中怎么实现一个页面复选框,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

第一步 分拆选中/未选中

<input type="checkbox">本身的样式不能修改,所以我们必须借助的帮助;实现选中/未选中区分,那自然就要用到伪类:checked;选择器一定是从外到内、从前到后的,没法选择父级元素,所以不能用<label>去包<input>,那么最终布局就只能是:

CSS Code复制内容到剪贴板

  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>  

很简单哈,不解释了。CSS3新增了“下一节点”选择器 +,用来选择某节点的下一个节点,结合:checked伪类就可以将选中的<input>和它临近的<label>通过改变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新增的选择器。前面为了实现<label>提前,没有用它包裹<input>,所以在选项很多很长导致换行的时候,可能出现复选框和标签脱离的尴尬状况。好在复选框的价值可以用别的样式取代,所以先把小方框隐藏起来,转而将<label>作为操作目标,再来点边框底色圆角(参考自Bootstrap 3),就可以了:

CSS Code复制内容到剪贴板

  1. input[type=checkbox] {   

  2.   displaynone;   

  3. }   

  4. label {   

  5.   min-width120px;   

  6.   border1px solid #CCC;   

  7.   padding2px 8px;   

  8.   text-aligncenter;   

  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.   cursorpointer;   

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI