star rating - radio

css

.rating { 
  border: none;
  float: left;
}


.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
  float: right;
  margin-bottom: 0;
}

/* highlight stars on hover */

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { /* hover previous stars in list */
    color: #aaa;
} 

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label {
    color: #999;
} 

.rating.active > input:checked ~ label { 
    color: #FFD700;  
}
.rating.active:hover > input:checked ~ label {
    color: #ddd;
}

.rating.active > input:checked + label:hover, /* hover current star when changing rating */
.rating.active > input:checked ~ label:hover,
.rating.active > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating.active > input:checked ~ label:hover ~ label {
    color: #FFD700;
} 

html

<fieldset class="rating">
	<input type="radio" class="rating-input" id="rating-input-1-5" name="rating-input-1" />
	<label for="rating-input-1-5" class="star"></label>
	
	<input type="radio" class="rating-input" id="rating-input-1-4" name="rating-input-1" />
	<label for="rating-input-1-4" class="star"></label>
	
	<input type="radio" class="rating-input" id="rating-input-1-3" name="rating-input-1" />
	<label for="rating-input-1-3" class="star"></label>
	
	<input type="radio" class="rating-input" id="rating-input-1-2" name="rating-input-1" />
	<label for="rating-input-1-2" class="star"></label>
	
	<input type="radio" class="rating-input" id="rating-input-1-1" name="rating-input-1" />
	<label for="rating-input-1-1" class="star"></label>
</fieldset>

js

$(function() {
  $('.rating-input').click(function() {
    $(this).closest('.rating').addClass('active');
  })
})