应用CSS完成网页页面复选框的方式

日期:2021-01-20 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

商品篇

在大家的后台管理中,必须设定广告宣传精确投放的地区,也便是要在全国性31个省、基层民主区、直辖市选中择。那末,出現下面这幅景色也就理所当然了:

这样做有几个难题:

    选项许多,沒有规律性,找起来很累
    假如是1个早已挑选了一部分选项的广告宣传,改动时依然必须用肉眼找寻,没法1眼看出来投放到哪些省分
    选完1个,再选下1个,还要从头开始找,乃至会被早已选过的危害

因而我想,最先应当把全部选项分成“已选定”和“未选定”两批,处理第2个难题,减轻第3个难题;其次复选框自身的使用价值不大,能够被更换为其它款式;唯1将会引进的难题,便是点选时,客户的预期是看到复选框里出現1个小对勾,表明选定,假如我把它移对外开放到“已选定”组里,客户将会会蒙蔽,必须1些時间学习培训。

因而我跟某商品主管盆友聊了聊这个念头,他表明的确将会导致客户蒙蔽,但是假如能添加动漫实际效果,那末基础没难题。嗯,刚开始动手能力。
技术性完成篇

近日flexbox标准定案,各访问器陆续适用display:flex;,另外传来1条好信息,新完成比老实巴交现display:box;快许多。这次我准备用flexbox来处理难题,由于里边有1个很关键的特性:order(以前叫box-ordinal-group),它能够更改合理布局中元素的排序次序,相互配合CSS3新增的挑选器,应当能够考虑必须。
第1步 分拆选定/未选定

(有关flexbox的专业知识,能够根据Google掌握,尽管搜到的多是上1个版本号,但是和最后版区别不大,只是称呼不一样。本文已不过量解读,我就当大伙儿都会了)

<input type="checkbox">自身的款式不可以改动,因此大家务必依靠的协助;完成选定/未选定区别,那当然就要用到伪类:checked;挑选器1定是由外到内、从前到后的,无法挑选父级元素,因此不可以用<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">1毛不拔高手</label>   
  14. </div>  

很简易哈,不解释了。CSS3新增了“下1连接点”挑选器 +,用来挑选某连接点的下1个连接点,融合: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. }  

但是这样只是把选定的內容提早,视觉效果上沒有真实的切分。因此我决策再添加1根切分线,上面是选定的,下面是未选的。这个情况下大家必须用到 ~ 这个挑选器,挑选某连接点后边的连接点:

CSS Code拷贝內容到剪贴板
  1. hr {   
  2.   display:none; // 默认设置状况下,没选任何选项,切分线掩藏   
  3.   order: 1; // 切分线次序为1   
  4.   width:100%; // 确保独霸1行   
  5. }   
  6. input[type=checkbox]:checked ~ hr {   
  7.   display:block; // 有选项被选定后才会显示信息切分线   
  8. }  

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

这样基本作用完成了。但是视觉效果上,排版依然不齐整,选定的选项和未选定的选项区别不算太显著,因此下1步我提前准备清理下checkbox。
第2步,清理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. }  

这样看起来也有升高室内空间,假如再加几个标志回应客户实际操作,那末学习培训成本费会更低,对实际操作后的预期也会更精确。因而引入CDN上的font-awesome,应用:before伪类再加小标志,就获得了最后实际效果

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

我不经意中发现,这样大批量加上删掉时,电脑鼠标能够常点没动,应当也是个出现意外的获得吧。
第3步,添加动漫文化教育客户(不成功)

至此作用基础做好了,但是因为改动了个人行为,将会致使客户蒙蔽,因此提前准备加个动漫协助客户了解这个互动。

可是做为1个新作用,访问器的适用尚不健全,尽管标准中要求“animatable: yes”,可是实测在Chrome v.30下也没法工作中:

http://jsfiddle.net/meathill/Ka66W/1/

来看仅有等新版访问器公布后再去健全了。
适配性

应用纯CSS做组件,基本上无需担忧适配性难题,由于访问器自身就做了很好的向下适配,编码数最多不起效,1般不容易错。

实际到这个组件,由于只对于视觉效果实际效果,沒有删改改任何访问器个人行为,因此适配性也沒有任何难题。但是最后实际效果呢,仅有适用flexbox和CSS3挑选符的访问器才可以一切正常3D渲染。

我的自然环境是Window 8 + Chrome v.30,和小米2 + Chrome v.30,检测根据。
续篇

现如今CSS很强,纯CSS能够完成许多作用,期待将来能做出更多有使用价值的物品。共享这个组件的完成,期待对大伙儿有效。