根据 <input> 的状态设置 <label> 样式答案

【问题标题】：Style a <label> based on its <input>'s state根据 <input> 的状态设置 <label> 样式
【发布时间】：2011-01-21 14:30:00
【问题描述】：

是否可以仅使用 CSS 来根据输入状态设置 HTML 标签的样式？

就我而言，我想根据是否选中 <input type="checkbox"> 来设置其样式。

我尝试将标签放在输入中，但 Firefox 和 Chrome（至少）似乎将它们解析为兄弟姐妹，即使它们明显嵌套在输入源中。而且我不知道如何编写可以通过 for= 属性间接实现的 CSS 规则。

我需要在这个上抽出 Javascript 吗？

【问题讨论】：

标签： html css input checkbox

【解决方案1】：

它们不需要嵌套，这就是元素中的“for”属性的作用。

在现代浏览器（支持 CSS 2.1 的浏览器）中，您可以使用同级选择器，例如

input + label {
  /* rules */
}

您的标记必须具有严格的兄弟关系，例如：

<input name="cb" id="cb" type="checkbox"><label for="cb">Checkbox</label>

【讨论】：

啊，我不知道兄弟选择器（但我应该知道）。这将是完美的，除了在这种情况下它需要在 IE6 中工作，这似乎不支持它们。回到 JS 就是这样。 :-(
是的，IE6 是一个十字架，我也必须每天在世界各地拖。对不起！

【解决方案2】：

使用相邻/兄弟选择器加上属性选择器可以使它工作：

<form>
    <style>
    INPUT[checked=checked] + LABEL {
        color: #f00;    
    }
    </style>
    <div>
        <input type="checkbox" id="chk1" />
        <label for="chk1">Label #1</label>
    </div>
    <div>
        <input type="checkbox" id="chk2" checked="checked" />
        <label for="chk2">Label #2</label>
    </div>
</form>

【讨论】：

【解决方案3】：

要使这件事起作用，您需要将label 放在input 之后，这适用于文本类型输入，所以for checkbox you can skip this，除非您想要复选框之前的标签。

要保持 label 的顺序显示在 input 之前，您需要使用 Flexbox 并反转项目顺序，例如像这样。

.form-group {
  display: flex;
  flex-direction: column-reverse;
}

display: flex; 和 flex-direction: column-reverse; 重新排序 div 内容。

现在您需要做的就是使用它来影响您的label 样式。

input:checked + label {
  color: #000;
}

为了完整性而使用 HTML。

<div class="form-group">
        <input type="checkbox" name="rememberPwd" id="rememberPwd" class="form-input" required/>
        <label for="rememberPwd">Remember?</label>
</div>

【讨论】：