如果选中复选框,则突出显示标签并更改范围内的颜色

时间:2017-08-15 16:32:24

标签: html css checkbox label checked

如果选中复选框,我需要突出显示标签。并在此标签中更改 span 的颜色。 标签工作正常,但我不知道,如果选中复选框,如何更改范围的颜色。

HTML

<input class="check" type="radio" name="typeSelect" id="a" value="1" /><label class="labelcheck" for="a"> <span >Hello </span> World</label>
<input class="check" type="radio" name="typeSelect" id="b" value="2" /><label class="labelcheck" for="b"> <span >Hi </span> Again</label>

CSS

.check:checked + .labelcheck {
  font-weight: bold;
}
.check:checked + .labelcheck + . span {
  color: red;
}

1 个答案:

答案 0 :(得分:1)

由于span是标签的子项,您可以这样做:

.check:checked + .labelcheck {
    font-weight: bold;
}
.check:checked + .labelcheck span {
    color: red;
}