5 star rating system HTML using radio buttons. credit to https://jsfiddle.net/leaverou/CGP87/

radio-html.md

<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>

.rating {
    float:left;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

Thanks 👍

Thanks for that. But the 'real' radio buttons have to be hidden differently to prevent a bug: In this example, it is hidden with top: -9999px, which means that the input slips up. If you click on the star (the label) with your mouse, the browser jumps to the top of the page.

I therefore recommend using the following rule for hiding the inputs:

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

I don't know if some of these rules are redunant, but i want to make sure that no user is seeing the 'real' radio input.

Thanks for the great script. I need to implement multiple rating bars. Anyone can help me.

Anyone got sample code or can anyone get me a hint to do this objective. Thanks

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

Thanks man👍

thank you 👌

Thanks for this man!
One question, what would you do in order to fix the use of the directions key?
When the first star is selected or focused, if you press the → key it should select the next star and by pressing ← it should select the previous star.
I am having that issue with this kind of solution.
Thanks a lot in advance!

Next step : Database to display the average note :D