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

【问题标题】：How do I select the label before and checked check box?如何选择之前的标签并选中复选框？
【发布时间】：2024-09-18 13:05:02
【问题描述】：

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

我的代码是：

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

我一直在努力使用 css 选择器来做到这一点。

【问题讨论】：

“选择标签”是什么意思？
勾选复选框后，我想给标签应用样式
如果标签在...之前，您不能只使用 css ...
那么 javascript 是唯一的解决方案，该死！
或者您可以在复选框后更改您的 html 标签并使用 css 更改位置

标签： html css checkbox css-selectors label

【解决方案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> 之后但可以随意使用它时，它可以工作。

【讨论】：

这就是重点，由于正在生成内容，标签位于输入上方，而我只能控制样式。如果没有办法在 css 中做到这一点，那就足够了

【解决方案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/

【讨论】：