甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
本篇文章给大家分享的是有关CSS中怎么实现一个页面复选框，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
祁阳ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！
第一步 分拆选中/未选中
本身的样式不能修改，所以我们必须借助的帮助；实现选中/未选中区分，那自然就要用到伪类: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; // 有选项被选中后才会显示分割线
}
http://jsfiddle.net/meathill/fPN3p/5/embedded/result/
这样基础功能实现了。不过视觉上，排版仍然不整齐，选中的选项和未选中的选项区分不算太明显，所以下一步我准备美化下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;
}
以上就是CSS中怎么实现一个页面复选框，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。