复选框样式

Question

有没有办法为复选框和带边框的标签设置样式，因此用户只能看到标签（隐藏复选框），当用户点击标签时，标签会更改背景颜色和文字？单击该复选框也可以使用此单击。 如果有办法，我该怎么做？

或

如何隐藏复选框并只留下标签可以改变颜色吗？

Answer 1

将它们放在一边（ in html structure ）并使用adjacent sibling selector +

像这样的东西

HTML

<input type="checkbox" id="box1" />
<label for="box1">checkbox #1</label>

CSS

input[type="checkbox"]{
    position:absolute;
    visibility:hidden;
    z-index:-1;
}
input[type="checkbox"]:checked + label{
    color:red;
}

您可以根据需要设置标签的样式（第二规则）..

演示http://jsfiddle.net/kb67J/1/