Why my focus is not working properly it only works for active?-CodePudding

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

CodePudding user response：

try this

input[type="radio"]:focus label {
  color: red;
}

input[type="radio"]:checked label {
  color: red;
}

<div >
  <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>

CodePudding user response：

https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/radio/radio-1/radio-1.html

Its radio button it working on only active radio button focus for more details please read above link.