定位已检查输入的标签

Question

如果我有一个包含在标签内的无线电输入，那么在检查输入时如何定位标签？

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

我试过了：

input:checked + label { color: red }

和

input:checked + label 

但是没有用，我做错了什么？我还尝试了>选择器。

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

Answer 1

CSS中没有父级或后向选择器（yet?）。因此，我们无法通过包装输入选择包装器标签。

有两种选择：

1）通过内联包装器（如<span>元素）包装内容，如下所示：

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

然后使用相邻的同级选择器<span>选择+：

input:checked + span {
   color: red
}

<强> WORKING DEMO

2）使用for attribute标签按其id属性定位输入，如下所示：

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

然后按以下方式选择标签：

input:checked + label {
    color: red
}

<强> WORKING DEMO

Answer 2

如果你将html修改为：

，你的CSS将会有效

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

在输入上使用带有for的{​​{1}}属性，您可以点击标签来影响按钮，就像包装在元素中一样。

http://jsfiddle.net/PMmrk/