Question

我想在选中复选框时将样式应用于标签，但标签位于复选框之前。

我的代码是：

<label class="label" for="main-checkbox">LABEL</label><br />
<input type="checkbox" id="main-checkbox">

我一直在努力与css选择器做这件事。

Answer 1

<p><input type="checkbox" name="main-checkbox">
<label for="main-checkbox"><span></span></label></p>

然后使用CSS

p {
    position: relative;
}

p > input[type="checkbox"] {
    cursor: pointer;
    position: absolute;
    left: 3px;
    top: 0;
    z-index: 2;
    width: 26px;
    height: 26px;
    opacity: 0;
    vertical-align: middle;
}

p > input[type="checkbox"] +label {
    vertical-align: middle;
    background-color: #555;
    height: 35px;
    width: 35px;
    margin-right: 16px;
    display: inline-block;
    z-index: 1;
    position: relative;
}

label>span:before {
    text-indent: 0;
    font-size: 30px;
    color: #fff;
    position: absolute;
    top: -1px;
    left: 7px;
}

label>span:after {
    display: none;
}

p > input[type="checkbox"]:checked+label:after {
    content: 'B';
    text-indent: 0;
    font-size: 30px;
    color: #F0F;
    position: absolute;
    top: -1px;
    left: 7px;
}

p > input[type="checkbox"] +label:after {
    content: 'A';
    text-indent: 0;
    font-size: 30px;
    color: #F0F;
    position: absolute;
    top: -1px;
    left: 7px;
}

查看我制作的JSFiddle：http://jsfiddle.net/rzTFP/

我将复选框变为一般可点击框。

当标签位于<input>之后但随后玩它时，它会起作用。

Answer 2

您可以修改“已检查”状态...但它不适用于旧版浏览器。

http://jsfiddle.net/CjpmP/

<强> HTML

<div>
  <input type="checkbox" id="check" class="check-with-label" />
  <label for="check" class="label-for-check">My Label</label>
<div>

<强> CSS

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

我建议使用javascript，以便您使用更传统的CSS规则，但...... http://jsfiddle.net/MGVHX/1/

如何选中之前的标签并选中复选框？

2 个答案: