<div class="star-rating"> <input type="radio" id="star5" name="rating" value="5" aria-label="5 stars" /> <label for="star5" title="5 stars" aria-hidden="true"></label> <input type="radio" id="star4" name="rating" value="4" aria-label="4 stars" /> <label for="star4" title="4 stars" aria-hidden="true"></label> <input type="radio" id="star3" name="rating" value="3" aria-label="3 stars" /> <label for="star3" title="3 stars" aria-hidden="true"></label> <input type="radio" id="star2" name="rating" value="2" aria-label="2 stars" /> <label for="star2" title="2 stars" aria-hidden="true"></label> <input type="radio" id="star1" name="rating" value="1" aria-label="1 star" /> <label for="star1" title="1 star" aria-hidden="true"></label></div>x
* { margin: 0; padding: 0;}.star-rating { display: inline-block; font-size: 0; /* Remove white space between inline-block elements */ background-color: #333; /* Dark gray background color */ padding: 10px; /* Add some padding for spacing */ border-radius: 5px; /* Add rounded corners for style */}.star-rating input[type="radio"] { display: none;}.star-rating label { float: right; font-size: 30px; color: #ccc; cursor: pointer;}.star-rating label::before { content: "\2605"; /* Unicode character for a star */}.star-rating input[type="radio"]:checked ~ label { color: #ffc700; /* Yellow color for selected stars */}.star-rating label:hover,.star-rating label:hover ~ label { color: #deb217; /* Yellow color on hover */}.star-rating input[type="radio"]:checked + label:hover,.star-rating input[type="radio"]:checked + label:hover ~ label,.star-rating input[type="radio"]:checked ~ label:hover,.star-rating input[type="radio"]:checked ~ label:hover ~ label,.star-rating label:hover ~ input[type="radio"]:checked ~ label { color: #c59b08; /* Highlight color on selected star hover */}xxxxxxxxxx1
