一尘不染

选中的单选按钮标签的CSS选择器

css

是否可以将css(3)样式应用于选中的单选按钮的标签?

我有以下标记:

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

我希望的是

label:checked { font-weight: bold; }

会做某事,但是可惜它没有(我预期的那样)。

是否有一个选择器可以实现这种功能?如果有帮助,您可以将divs围起来,但是最好的解决方案是使用标签“ for”属性。

应该注意的是,我能够为我的应用程序指定浏览器,所以请最好使用css3等类。


阅读 839

收藏
2020-05-16

共1个答案

一尘不染

尝试+符号:它是相邻的同级组合器。它结合了两个具有相同父级的简单选择器序列,第二个选择器必须在第一个选择器之后 立即 出现。

因此:

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked

适用于以下标记:

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

…,只要标签跟随无线电输入,它将适用于任何结构,无论是否带有div等。

例:

input[type="radio"]:checked+label { font-weight: bold; }


<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>

<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>
2020-05-16