更改复选框标签css属性并选中复选框

在选中标签时,您无法仅通过CSS直接设置标签样式,但您可以设置复选框的同级样式.

http://jsfiddle.net/QdDpL/

HTML

<label>
    <input class="check" type="checkbox" />
    <span class="label-text">Checkbox</label>
</label>

CSS

label {
    background: yellow;
}
label .label-text {
    background: cyan;
}
label input.check:checked + .label-text {
    background: lime;
}

您也可以使用浮动和填充来使复选框显示为好像它位于.label文本范围内.

有关兄弟选择器的浏览器支持,请参阅以下链接:http: //caniuse.com/css-sel2

或者如另一个答案所说的那样,如果它是复选框的兄弟,你可以设置标签的样式 - 但就像我的答案仍然不包含标签中的复选框一样.

你可以用这样的纯css实现这个,

<input type="checkbox" id="cb_1" value="cb_val" name="cb_name">
<label for="cb_1">
     my checkbox text
</label>

有了这个CSS,

label { background-color:#333; color:#FFF; }

input[type="checkbox"]:checked + label {
    background: brown;
}

的jsfiddle

记住

标签必须在复选框之后,因此您需要对其进行更多样式以保持您的外观.

这里有一个风格选项,可以让你拥有与你想要的相同的外观,新小提琴.这不涉及任何绝对的定位,只是一些诡计.