头闻号

天津浩博闻达钢材销售有限公司

无缝管|角钢|普中板|不锈钢材|扁钢|焊管

首页 > 新闻中心 > 科技常识:使用CSS实现页面复选框的方法
科技常识:使用CSS实现页面复选框的方法
发布时间:2024-12-23 19:18:53        浏览次数:7        返回列表

今天小编跟大家讲解下有关使用CSS实现页面复选框的方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关使用CSS实现页面复选框的方法 的相关资料,希望小伙伴们看了有所帮助。

产品篇

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

这样做有几个问题:

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

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

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

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

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

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

CSS Code复制内容到剪贴板 <div> <inputtype="checkbox"name="q[]"id="q1"/> <labelfor="q1">小宝3225</label> <inputtype="checkbox"name="q[]"id="q2"/> <labelfor="q2">王老白白白</label> <inputtype="checkbox"name="q[]"id="q3"/> <labelfor="q3">空夫31</label> <inputtype="checkbox"name="q[]"id="q4"/> <labelfor="q4">谷大白话</label> <inputtype="checkbox"name="q[]"id="q5"/> <labelfor="q5">Meathill</label> <inputtype="checkbox"name="q[]"id="q6"/> <labelfor="q6">一毛不拔大师</label> </div>

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

CSS Code复制内容到剪贴板 #container{ display:flex; flex-direction:row; flex-wrap:wrap; } #containerinput, #containerlabel{ 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;//有选项被选中后才会显示分割线 }

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

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

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

CSS Code复制内容到剪贴板 input[type=checkbox]{ display:none; } label{ min-width:120px; border:1pxsolid#CCC; padding:2px8px; text-align:center; margin:05px5px0; 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伪类加上小图标 就得到了最终效果

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

我无意中发现 这样批量添加删除时 鼠标可以常点不动 应该也是个意外的收获吧。第三步 加入动画教育用户(失败)

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

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

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

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

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

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

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

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

来源:爱蒂网