定位已检查输入的标签 [英] Target the label of a checked input

问题描述

如果我的无线输入包裹在标签中，那么在检查输入时如何定位标签?

If I have a radio input that is wrapped within a label, how can I target the label when the input is checked?

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

我尝试过:

input:checked + label { color: red }

和

input:checked + label 

但是没有一个起作用，我在做什么错?我还尝试了> 选择器.

But none worked, what I am doing wrong? I also tried the > selector.

之所以要用标签包裹输入，是因为我需要标签是可点击的

推荐答案

CSS中没有父级或后向选择器(

There's no parent or backward selector in CSS (yet?). Thus, we can't select the wrapper label by the wrapped input.

1)，用内嵌包装器(如< span> 元素)包装内容，如下所示:

1) Wrapping the content by an inline wrapper like <span> element, as follows:

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

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

Then select the <span> by using adjacent sibling selector +:

input:checked + span {
   color: red
}

工作演示

WORKING DEMO

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

2) Using for attribute for the label to target the input by its id attribute as follows:

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

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

And Then select the label by:

input:checked + label {
    color: red
}

工作演示 .

WORKING DEMO.

这篇关于定位已检查输入的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！