CSS pseudo class for label after being clicked-CodePudding

I have the task of implementing a star review.

I assume that I need to set a rule on the label, since the inputs are hidden. My question is, how can I give the stars a color of black even after being clicked. I know that the active pseudo-class only works when being clicked. Is there another pseudo-class for this? The goal of is to do this only using HTML/CSS.

<div  id="rating-stars-features">
  <input  type="radio" id="rating-features-1" value="1" />
  <input  type="radio" id="rating-features-2" value="2" />
  <input  type="radio" id="rating-features-3" value="3" />
  <label  for="rating-features-1">★</label>
  <label  for="rating-features-2">★</label>
  <label  for="rating-features-3">★</label>
</div>

CodePudding user response：

You can achieve a HTML/CSS only star rating system that has good browser support by utilising the CSS subsequent sibling selector ~ with flexbox row-reverse for left-to-right stars:

.rating-stars {
  display: flex;
  flex-flow: row-reverse;
  width: fit-content;
}

.visuallyhidden {
  display: none;
}

.rating-radio:checked~.rating-star {
  color: gold;
}

<div  id="rating-stars-features">
  <input  type="radio" name="stars" id="rating-features-1" value="1" />
  <label  for="rating-features-1">★</label>
  <input  type="radio" name="stars" id="rating-features-2" value="2" />
  <label  for="rating-features-2">★</label>
  <input  type="radio" name="stars" id="rating-features-3" value="3" />
  <label  for="rating-features-3">★</label>
</div>