Prevent page to go back on top when selecting a star rating

Question

I found a code to help change stars color as you hover over them. It works like a charm. However, when I click on a star to fix the rating, it sends me to the top of the page. The stars are a little at the bottom of the page so it is very annoying to click on a star and end up at the top and having to scroll back down again. The page is not being refreshed. It just sends me to the top. Is there a way to prevent this and allow the user to click on the star and stay on the part of the page where the stars are?

HTML

<fieldset class="rating">
<legend>Please rate:</legend>
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>

Here is the full code: jsfiddle

Thanks

Answer 1

DEMO

Hi User2961763

It seems that top:-9999px; on .rating:not(:checked) > input causing problem. if you comment or remove this style it will work fine though you also need to take care that it wont affect your other functionality. Hope it Helps

.rating:not(:checked) > input {
    position:absolute;
    /* top:-9999px; */
    clip:rect(0,0,0,0);
}