<div class="rating-container">
<div class="star-group">
<input type="radio" id="s5" name="rating" value="5" /><label for="s5" title="5 Stars">★</label>
<input type="radio" id="s4" name="rating" value="4" /><label for="s4" title="4 Stars">★</label>
<input type="radio" id="s3" name="rating" value="3" /><label for="s3" title="3 Stars">★</label>
<input type="radio" id="s2" name="rating" value="2" /><label for="s2" title="2 Stars">★</label>
<input type="radio" id="s1" name="rating" value="1" /><label for="s1" title="1 Star">★</label>
</div>
</div>
Back to Snippets
Interactive CSS Star Rating
Collect user feedback with this interactive 5-star rating component. It is built purely with CSS using the flexbox reverse technique, so it handles hover states perfectly without needing any complex JavaScript.
496