I have a css and when im writing:
.rate:not(:checked) > label:active,
.rate:not(:checked) > label:active ~ label {
color: red;
}
it works fine but for this code its not working:
.rate:not(:checked) > label:focus,
.rate:not(:checked) > label:focus ~ label {
color: black;
}
HTML CODE:
<div class="rate p-0">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>
try this
input[type="radio"]:focus+label {
color: red;
}
input[type="radio"]:checked+label {
color: red;
}<div class="rate p-0">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>