CODEWITHSUNDEEP
htmlcsscheckboxlabelchecked
Patrik
Patrik

Reputation: 1327

Highlight label and change color in span if checkbox is checked

If checkbox is checked, I need to highlight label. And change color of span in this label. Label is working fine, but I don't know, how to change color of span, when checkbox is checked.

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;
}

Upvotes: 0

Views: 1241

Answers (1)

Maarten van Tjonger
Maarten van Tjonger

Reputation: 1927

Since the span is a child of label, you can just do:

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

Upvotes: 1

Related Questions