html - 定位选中输入的标签

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 .