您现在的位置是：网站首页> 编程资料编程资料

使用CSS实现页面复选框的方法HTML+CSS实现单选框、复选框美观的样式利用CSS3实现单选框动画特效示例代码纯css3实现效果超级炫的checkbox复选框和radio单选框CSS3实例分享--超炫checkbox复选框和radio单选框CSS3实现的表单单选框、复选框特效CSS3实现复选框动画特效示例代码 CSS自定义绿色复选框按钮样式纯CSS实现自定义单选框和复选框功能

2023-10-23 152人已围观

简介 这篇文章主要介绍了使用CSS实现页面复选框的方法,纯CSS实现,绝不添加任何JS :P 需要的朋友可以参考下

产品篇

在我们的后台中，需要设置广告精准投放的区域，也就是要在全国31个省、自治区、直辖市中选择。那么，出现下面这幅景象也就理所应当了：
2015721171247784.jpg (584×99)

这样做有几个问题：

    选项很多，没有规律，找起来很累
    如果是一个已经选择了部分选项的广告，修改时仍然需要用肉眼寻找，无法一眼看出来投放到哪些省份
    选完一个，再选下一个，还要从头找，甚至会被已经选过的影响

于是我想，首先应该把所有选项分为“已选中”和“未选中”两批，解决第2个问题，减轻第3个问题；其次复选框本身的价值不大，可以被替换为其它样式；唯一可能引入的问题，就是点选时，用户的预期是看到复选框里出现一个小对勾，表示选中，如果我把它移开放到“已选中”组里，用户可能会迷惑，需要一些时间学习。

于是我跟某产品经理朋友聊了聊这个想法，他表示确实可能造成用户迷惑，不过如果能加入动画效果，那么基本没问题。嗯，开始动手。
技术实现篇

近日flexbox规范定案，各浏览器相继支持display:flex;，同时传来一条好消息，新实现比老实现display:box;快很多。这次我打算用flexbox来解决问题，因为里面有一个很重要的属性：order（之前叫box-ordinal-group），它可以改变布局中元素的排列顺序，配合CSS3新增的选择器，应该可以满足需要。
第一步 分拆选中/未选中

（关于flexbox的知识，可以通过Google了解，虽然搜到的多是上一个版本，不过和最终版差别不大，只是叫法不同。本文不再过多讲解，我就当大家都会了）

本身的样式不能修改，所以我们必须借助的帮助；实现选中/未选中区分，那自然就要用到伪类:checked；选择器一定是从外到内、从前到后的，没法选择父级元素，所以不能用

CSS Code复制内容到剪贴板
  1.   
  2.     "checkbox" name="q[]" id="q1" />   
  3.     "q1">小宝3225   
  4.     "checkbox" name="q[]" id="q2" />   
  5.     "q2">王老白白白   
  6.     "checkbox" name="q[]" id="q3" />   
  7.     "q3">空夫31   
  8.     "checkbox" name="q[]" id="q4" />   
  9.     "q4">谷大白话   
  10.     "checkbox" name="q[]" id="q5" />   
  11.     "q5">Meathill   
  12.     "checkbox" name="q[]" id="q6" />   
  13.     "q6">一毛不拔大师   
  

很简单哈，不解释了。CSS3新增了“下一节点”选择器 +，用来选择某节点的下一个节点，结合:checked伪类就可以将选中的和它临近的

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新增的选择器。前面为了实现

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

    上一篇：我叫MT3.5版本抗性将失去作用 开启暴力时代_手机游戏_游戏攻略_

    下一篇：使用icon fonts来辅助CSS处理图片纯CSS3实现的动态天气小图标特效源码纯CSS3实现天气动画图标特效源码详解CSS中iconfont的使用CSS3制作ajax loader icon实现思路及代码CSS3 icon font完全指南(CSS3 font 会取代icon图标)使用css如何制作时间ICON方法实践z-blog用CSS定义分类RSS订阅图标CSS icon图标之纯CSS实现带动画效果的天气图标

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网