css - 复选框样式

Question

有没有办法给一个复选框和一个带边框的标签设置样式，这样用户只能看到标签(复选框被隐藏)，当用户点击标签时，标签会改变背景颜色和文字？这个点击也应该像点击复选框一样工作。如果有办法，我应该怎么做？

或

如何隐藏复选框，只留下标签来改变颜色？

Answer 1

将它们并排放置(在 html 结构中)并使用 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/