最后只要再搭配 :checked 拟类别(Pseudo-classes)就能收工下班啦！
CSS Code复制内容到剪贴板
.abgne-menu-20140101-1 input[type="radio"]:checked + label {
background-color: #f00;
color: #fff;
}
这边是针对被点选到的单选框元素后的下一个标签元素进行设定。整个完成后的样式就变成了：
而多选框的自订方式也可以依此类推来设定。
XML/HTML Code复制内容到剪贴板
<body>
<h3>专长(多选)</h3>
<div class="abgne-menu-20140101-2">
<input type="checkbox" id="jquery" name="skill" checked>
<label for="jquery">jQuery</label>
<input type="checkbox" id="css3" name="skill">
<label for="css3">CSS3</label>
<input type="checkbox" id="html5" name="skill">
<label for="html5">HTML5</label>
<input type="checkbox" id="angularjs" name="skill">
<label for="angularjs">AngularJS</label>
</div>
</body>
CSS 的部份只要将 input[type="radio"] 改成 input["checkbox"] 就可以了
CSS Code复制内容到剪贴板
.abgne-menu-20140101-2 input[type="checkbox"] {
display: none;
}
.abgne-menu-20140101-2 input[type="checkbox"] + label {
display: inline-block;
background-color: #ccc;
cursor: pointer;
padding: 5px 10px;
}
.abgne-menu-20140101-2 input[type="checkbox"]:checked + label {
background-color: #f3d42e;
}
是不是很简单呢~
下面则是要教大家如何凭空产生出单/多选框的元素囉。
