定位已检查输入的标签答案

【问题标题】：Target the label of a checked input定位已检查输入的标签
【发布时间】：2014-03-02 16:15:29
【问题描述】：

如果我有一个包含在标签中的单选输入，那么在检查输入时如何定位标签？

<div>
  <p>Payment Plan:</p>
  <label><input name="os0" type="radio" value="monthly">TEST</label>
</div>

我试过了：

input:checked + label { color: red }

和

input:checked + label

但没有一个工作，我做错了什么？我还尝试了> 选择器。

我有标签包装输入的原因是因为我需要标签是可点击的

【问题讨论】：

【解决方案1】：

CSS 中没有父选择器或后向选择器 (yet?)。因此，我们不能通过被包装的输入来选择包装标签。

有两种选择：

1) 使用像<span> 元素这样的内联包装器来包装内容，如下所示：

<label>
  <input name="os0" type="radio" value="monthly">
  <span>TEST</span>
</label>

然后使用相邻兄弟选择器+选择<span>：

input:checked + span {
   color: red
}

2) 使用for attribute 作为标签，通过其id 属性来定位输入，如下所示：

<input name="os0" type="radio" id="myinput" value="monthly">
<label for="myinput">TEST</label>

然后通过以下方式选择标签：

input:checked + label {
    color: red
}

【讨论】：

【解决方案2】：

如果您将 html 修改为以下内容，您的 css 将起作用：

<div>
  <p>Payment Plan:</p>
  <input id="os0" name="os0" type="radio" value="monthly">
  <label for="os0">TEST</label>
</div>

在输入中使用for 属性和id 可以让您单击标签以影响按钮，就像包裹在元素中时一样。

【讨论】：