5 Star Rating CSS

[scubbastevie]

Hi Folks,

I have a small issue with css that I need help with. I have a rating system on a project. My css is set up to display grey stars that can be hovered over which turn to blue stars until selected, although when I select 1 star, the middle star turns gold instead of the left most grey star, likewise if I select 2 stars, two gold stars appear between the second and fourth stars. Can anyone advise how to change my code to turn the grey stars gold depending on the star selected

    form .stars {
      background: url("stars.png") repeat-x 0 0;
      width: 150px;
      margin: 0 auto;
    }

    form .stars input[type="radio"] {
      position: absolute;
      opacity: 0;
      filter: alpha(opacity=0);
    }
    form .stars input[type="radio"].star-5:checked ~ span {
      width: 100%;
    }
    form .stars input[type="radio"].star-4:checked ~ span {
      width: 80%;
    }
    form .stars input[type="radio"].star-3:checked ~ span {
      width: 60%;
    }
    form .stars input[type="radio"].star-2:checked ~ span {
      width: 40%;
    }
    form .stars input[type="radio"].star-1:checked ~ span {
      width: 20%;
    }
    form .stars label {
      display: block;
      width: 30px;
      height: 30px;
      margin: 0!important;
      padding: 0!important;
      text-indent: -999em;
      float: left;
      position: relative;
      z-index: 10;
      background: transparent!important;
      cursor: pointer;
    }
    form .stars label:hover ~ span {
      background-position: 0 -30px;
    }
    form .stars label.star-5:hover ~ span {
      width: 100% !important;
    }
    form .stars label.star-4:hover ~ span {
      width: 80% !important;
    }
    form .stars label.star-3:hover ~ span {
      width: 60% !important;
    }
    form .stars label.star-2:hover ~ span {
      width: 40% !important;
    }
    form .stars label.star-1:hover ~ span {
      width: 20% !important;
    }
    form .stars span {
      display: block;
      width: 0;
      position: relative;
      top: 0;
      left: 0;
      height: 30px;
      background: url("stars.png") repeat-x 0 -60px;
      -webkit-transition: -webkit-width 0.5s;
      -moz-transition: -moz-width 0.5s;
      -ms-transition: -ms-width 0.5s;
      -o-transition: -o-width 0.5s;
      transition: width 0.5s;

}