定位已检查输入的标签

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中没有父选择器或反向选择器(但是？).因此,我们无法通过包装输入选择包装器标签.

有两种选择:

1)通过内联包装器<span>元素包装内容,如下所示:

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

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

input:checked + span {
   color: red
}

工作演示

2)使用for属性为标签的目标通过其输入id属性如下:

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

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

input:checked + label {
    color: red
}

工作演示.