Rating system with stars

Question

I am looking long time for a star rating system. I need something that is quite simple and that works! Here is what i've tried:

    $(':radio').change(
      function(){
        $('.choice').text( this.value + ' stars' );
      } 
    )

    //reset, center n shiz (don't mind this stuff)
    *, ::after, ::before{
      height: 100%;
      padding:0;
      margin:0;
      box-sizing: border-box;
      text-align: center;  
      vertical-align: middle;
    }
    body{
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
      Helvetica, Arial, "Lucida Grande", sans-serif;
      &::before{
        height: 100%;
        content:'';
        width:0;
        background:red;
        vertical-align: middle;
        display:inline-block;
      }
    }

.star-rating{
      font-size:0;
      white-space:nowrap;
      display:inline-block;
      width:250px;
      height:50px;
      overflow:hidden;
      position:relative;
      background:
          url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
      background-size: contain;
      i{
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 20%;
        z-index: 1;
        background: 
            url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');  
        background-size: contain;
      }
      input{ 
        -moz-appearance:none;
        -webkit-appearance:none;
        opacity: 0;
        display:inline-block;
        width: 20%;
        height: 100%; 
        margin:0;
        padding:0;
        z-index: 2;
        position: relative;
        &:hover + i,
        &:checked + i{
          opacity:1;    
        }
      }
      i ~ i{
        width: 40%;
      }
      i ~ i ~ i{
        width: 60%;
      }
      i ~ i ~ i ~ i{
        width: 80%;
      }
      i ~ i ~ i ~ i ~ i{
        width: 100%;
      }
    }
    
    //JUST COSMETIC STUFF FROM HERE ON. THESE AREN'T THE DROIDS YOU ARE LOOKING FOR: MOVE ALONG. 
    
    //just styling for the number
    .choice{
      position: fixed;
      top: 0;
      left:0;
      right:0;
      text-align: center;
      padding: 20px;
      display:block;
    }
   

    <span class="star-rating">
      <input type="radio" name="rating" value="1"><i></i>
      <input type="radio" name="rating" value="2"><i></i>
      <input type="radio" name="rating" value="3"><i></i>
      <input type="radio" name="rating" value="4"><i></i>
      <input type="radio" name="rating" value="5"><i></i>
    </span>
    <strong class="choice">Choose a rating</strong>

That is from THIS SITE. If i maked a mistake somewhere, please correct it in the comments below. I googled more much things, but sadly, doesn't work :/

Answer 1

You can tweak your markup/CSS and achieve this by using the below approach (updated with some of your code), which I wrote some time back. Note that this also wraps your inputs within a more semantic fieldset structure, as well as better UI in terms of currently hovered / currently selected items. If part of a form, the relevant value will also be correctly submitted.

$('.rating input').change(
  function() {
    $('#choice').text(this.value + ' stars');
  }
)

.rating {
  float: left;
  border: none;
}
.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;
}
.rating:not(:checked) > label:before {
  content: '★ ';
}
.rating > input:checked ~ label {
  color: #f70;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: gold;
}
.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;
}
.rating > label:active {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="rating">
  <input type="radio" id="star5" name="rating" value="5" />
  <label for="star5">5 stars</label>
  <input type="radio" id="star4" name="rating" value="4" />
  <label for="star4">4 stars</label>
  <input type="radio" id="star3" name="rating" value="3" />
  <label for="star3">3 stars</label>
  <input type="radio" id="star2" name="rating" value="2" />
  <label for="star2">2 stars</label>
  <input type="radio" id="star1" name="rating" value="1" />
  <label for="star1">1 star</label>
</fieldset>

<div id="choice"></div>

Answer 2

I would suggest using this css based rating system i have built. It is very easy to understand and modify

HTML:

<formset id = "rating" class = "rating">
<input type = "radio" id = "r0"  name = "rating" checked = true style = "display:none;"> <label for = "r0" style = "display:none;"></label>
<input type = "radio" id = "r1"  name = "rating"> <label for = "r1"></label>
<input type = "radio" id = "r2"  name = "rating"> <label for = "r2"></label>
<input type = "radio" id = "r3"  name = "rating"> <label for = "r3"></label>
<input type = "radio" id = "r4"  name = "rating"> <label for = "r4"></label>
<input type = "radio" id = "r5"  name = "rating"> <label for = "r5"></label>
</formset>

CSS:

fieldset, label { margin: 0; padding: 0; }
.rating
{
  color: yellow;
}
formset > label, formset > input
{
  float: left;
}


formset > label::after
{
    content: '★ ';
    font-size: 50px;
    color: lightpink;
}

formset:hover > input:not(:checked) ~ label::after,
formset:not(:hover) > label::after,
formset:hover > input:checked ~ label::after
{
  color: orange;
}



formset:hover > input:checked ~ label:hover ~ label::after,
formset:hover > label:hover ~ label::after,
formset:not(:hover) > input:checked~label~label::after
{
  color: grey;
}

formset:hover > input:checked ~  label~ label::after,
formset:hover > label:hover ~ label::after
{
    color: lightpink;
}

formset:hover > label:hover~ input:checked~label~label::after
{
  color: grey;
}