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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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

第一步分拆选中/未选中

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

CSS Code复制内容到剪贴板

<div>
<input type="checkbox" name="q[]" id="q1" />
<label for="q1">小宝3225</label>
<input type="checkbox" name="q[]" id="q2" />
<label for="q2">王老白白白</label>
<input type="checkbox" name="q[]" id="q3" />
<label for="q3">空夫31</label>
<input type="checkbox" name="q[]" id="q4" />
<label for="q4">谷大白话</label>
<input type="checkbox" name="q[]" id="q5" />
<label for="q5">Meathill</label>
<input type="checkbox" name="q[]" id="q6" />
<label for="q6">一毛不拔大师</label>
</div>

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

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; // 有选项被选中后才会显示分割线
}

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

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

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

CSS Code复制内容到剪贴板