<div class="rate"><input type="radio" name="r" id="s5"><label for="s5">★</label><input type="radio" name="r" id="s4"><label for="s4">★</label><input type="radio" name="r" id="s3" checked><label for="s3">★</label><input type="radio" name="r" id="s2"><label for="s2">★</label><input type="radio" name="r" id="s1"><label for="s1">★</label></div>About this hover effect
A five-star rating that fills up to the hovered or chosen star, using radios in reverse order and the sibling combinator.
How it works
Five radio buttons are placed in reverse order inside a row-reverse flex container, so they look left to right but come after each other in the markup. The general sibling combinator then colours every star that follows the checked or hovered one. The result is a rating that fills up to your choice with no script.
Ways to customise it
- Change #fbbf24 to recolour the filled stars.
- Add or remove a radio and label pair to change the scale, keeping the reverse order.
- Increase the label font-size and hover scale for a more playful feel.
Good to know
Radios give you keyboard arrow-key support for free, and the group name keeps one value selected. Add a visible text label such as the current score if the rating matters to your users.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.