Interactive CSS Star Rating Widget

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="star-rating">
  <input type="radio" id="s5" name="rate" value="5" /><label for="s5">★</label>
  <input type="radio" id="s4" name="rate" value="4" /><label for="s4">★</label>
  <input type="radio" id="s3" name="rate" value="3" /><label for="s3">★</label>
  <input type="radio" id="s2" name="rate" value="2" /><label for="s2">★</label>
  <input type="radio" id="s1" name="rate" value="1" /><label for="s1">★</label>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.star-rating { display: inline-flex; flex-direction: row-reverse; gap: 4px; font-size: 22px; font-family: sans-serif; }
.star-rating input { display: none; }
.star-rating label { color: #d4d4d8; cursor: pointer; transition: color 0.2s, transform 0.1s; }
.star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label { color: #f59e0b; }
.star-rating label:hover { transform: scale(1.2); }