CSS- Star Rating Input using CSS and HTML

Example:

HTML:

?

1 2 3 4 5 6 7 8 9 10 11 12 13

Rating:   <span class="starRating">  <input id="rating5" name="rating" type="radio" value="5">  <label for="rating5">5</label>  <input id="rating4" name="rating" type="radio" value="4">  <label for="rating4">4</label>  <input checked="" id="rating3" name="rating" type="radio" value="3">  <label for="rating3">3</label>  <input id="rating2" name="rating" type="radio" value="2">  <label for="rating2">2</label>  <input id="rating1" name="rating" type="radio" value="1">  <label for="rating1">1</label>   </span>

CSS:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

.starRating:not(old){   display        : inline-block;   width          : 7.5em;   height         : 1.5em;   overflow       : hidden;   vertical-align : bottom; }   .starRating:not(old) > input{   margin-right : -100%;   opacity      : 0; }   .starRating:not(old) > label{   display         : block;   float           : right;   position        : relative;   background      : url('star-off.png');   background-size : contain; }   .starRating:not(old) > label:before{   content         : '';   display         : block;   width           : 1.5em;   height          : 1.5em;   background      : url('star-on.png');   background-size : contain;   opacity         : 0;   transition      : opacity 0.2s linear; }   .starRating:not(old) > label:hover:before, .starRating:not(old) > label:hover ~ label:before, .starRating:not(:hover) > :checked ~ label:before{   opacity : 1; }

Note: Make sure that two images 'star-off.png' and 'star-on.png'  are existing, which you are using in CSS .