复选框样式

Pav*_*vel 2 css css3

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

要么

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

Gab*_*oli 5

将它们放在一边(在html结构中)并使用相邻的兄弟选择器+

像这样的东西

HTML

<input type="checkbox" id="box1" />
<label for="box1">checkbox #1</label>
Run Code Online (Sandbox Code Playgroud)

CSS

input[type="checkbox"]{
    position:absolute;
    visibility:hidden;
    z-index:-1;
}
input[type="checkbox"]:checked + label{
    color:red;
}
Run Code Online (Sandbox Code Playgroud)

您可以根据需要设置标签样式(第2条规则)..

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