建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

使用CSS实现页面复选框的方法

更新时间:2016-12-31整理编辑:建站学习网阅读:0

   产品篇

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

  这样做有几个问题:

  选项很多,没有规律,找起来很累

  如果是一个已经选择了部分选项的广告,修改时仍然需要用肉眼寻找,无法一眼看出来投放到哪些省份

  选完一个,再选下一个,还要从头找,甚至会被已经选过的影响

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

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

  技术实现篇

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

  第一步 分拆选中/未选中

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

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

  CSS Code复制内容到剪贴板

  

 

  

  

  

  

  

  

  

  

  

  

  

  

  

 

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

  CSS Code复制内容到剪贴板

  #container {

  display:flex;

  flex-direction:row;

  flex-wrap:wrap;

  }

  #container input,

  #container label {

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

  }

  input[type=checkbox]:checked,

  input[type=checkbox]:checked + label {

  order: 0; // 越小越靠前

  }

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

  CSS Code复制内容到剪贴板

  hr {

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

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

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

  }

  input[type=checkbox]:checked ~ hr {

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

  }

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

  第二步,美化CHECKBOX

  做法与前面类似,也要用到CSS3新增的选择器。前面为了实现

  CSS Code复制内容到剪贴板

  input[type=checkbox] {

  display: none;

  }

  label {

  min-width: 120px;

  border: 1px solid #CCC;

  padding: 2px 8px;

  text-align: center;

  margin: 0 5px 5px 0;

  background: #FFF;

  color: #333;

  border-radius: 3px;

  box-sizing: border-box;

  }

  label:hover {

  border-color: #ADADAD;

  background: #EBEBEB;

  cursor: pointer;

  }

  input[type=checkbox]:checked + label {

  order: 0;

  background-color: #5cb85c;

  border-color: #4cae4c;

  color: #FFF;

  }

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

  background-color: #47a447;

  border-color: #398439;

  }

  这样看起来还有上升空间,如果加上几个图标响应用户操作,那么学习成本会更低,对操作后的预期也会更准确。于是引用CDN上的font-awesome,使用:before伪类加上小图标,就得到了最终效果。

  我无意中发现,这样批量添加删除时,鼠标可以常点不动,应该也是个意外的收获吧。

  第三步,加入动画教育用户(失败)

  至此功能基本做好了,不过由于修改了行为,可能导致用户迷惑,所以准备加个动画帮助用户理解这个交互。

  可惜作为一个新功能,浏览器的支持尚不完善,虽然规范中规定“animatable: yes“,但是实测在Chrome v.30下也无法工作:

  看来只有等新版浏览器发布后再去完善了。

  兼容性

  使用纯CSS做组件,几乎不用担心兼容性问题,因为浏览器本身就做了很好的向下兼容,代码最多不生效,一般不会错。

  具体到这个组件,因为只针对视觉效果,没有增删改任何浏览器行为,所以兼容性也没有任何问题。不过最终效果呢,只有支持flexbox和CSS3选择符的浏览器才能正常渲染。

  我的环境是Window 8 + Chrome v.30,以及小米2 + Chrome v.30,测试通过。

  后记

  如今CSS很强,纯CSS可以实现很多功能,希望今后能做出更多有价值的东西。分享这个组件的实现,希望对大家有用。

本文网址:https://www.dedexuexi.com/divcss/jc/1729.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:技巧
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
CSS如何控制li标记样式
« 上一篇2016年12月30日
一些CSS的设计原则浅谈
2016年12月30日下一篇 »
  • DIV CSS如何给文字字体添加下划线?
    0阅读
    在css中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用text-decoration属性设置css的text-decoration属性用于指定添加到文本的修饰,其underline属...
  • 纯CSS3实现带动画效果导航菜单无需js
    0阅读
    随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3。网页能表达的东西越来越多,css3兴起已经
  • CSS定义超链接四个状态的正确顺序L-V-H-A
    0阅读
    css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的简写
  • 在ie7下css居中样式text-align:center;偏左问题解决方法
    0阅读
    css样式text-align:center;在ie7下偏左问题,想必有很多朋友的遇到过吧,下面有个不错的方法,大家可以参考下,希望对大家有所帮助 复制代码 代码如下: body { text-align:center; } 用ie7打开是居左的。
  • 对div盒子模型使用心得总结
    0阅读
    相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下 盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content
 
QQ在线咨询