【HTML/CSS】レビュー評点などの登録に使える星(★)ボタン 【コピペで使える】

<div class="rate-form">
  <input id="star5" type="radio" name="rate" value="5">
  <label for="star5">★</label>
  <input id="star4" type="radio" name="rate" value="4">
  <label for="star4">★</label>
  <input id="star3" type="radio" name="rate" value="3">
  <label for="star3">★</label>
  <input id="star2" type="radio" name="rate" value="2">
  <label for="star2">★</label>
  <input id="star1" type="radio" name="rate" value="1">
  <label for="star1">★</label>
</div>

.rate-form {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.rate-form input[type=radio] {
  display: none;
}
.rate-form label {
  position: relative;
  padding: 0 5px;
  color: #ccc;
  cursor: pointer;
  font-size: 35px;
}
.rate-form label:hover {
  color: #ffcc00;
}
.rate-form label:hover ~ label {
  color: #ffcc00;
}
.rate-form input[type=radio]:checked ~ label {
  color: #ffcc00;
}