Star Rating With Pure CSS

Make simple star rating with css and no need javascript or jQuery.

by Aqeel Malik

HTML

<!-- Aqeel Malik (Web Developer) Email: [email protected] -->
<span class="stars">
	<label class="star-title">77 ratings</label>
	<input class="star" id="star5" type="radio" name="rating"/>
	<label class="star" for="star5"></label>
	<input class="star" id="star4" type="radio" name="rating"/>
	<label class="star" for="star4"></label>
	<input class="star" id="star3" type="radio" name="rating"/>
	<label class="star" for="star3"></label>
	<input class="star" id="star2" type="radio" name="rating"/>
	<label class="star" for="star2"></label>
	<input class="star" id="star1" type="radio" name="rating"/>
	<label class="star" for="star1"></label>
</span>

CSS

/* Aqeel Malik (Web Developer) Email: [email protected] */
span.stars {float: left}
.star-title {margin: 0 10px;float: right}
.stars input.star {display: none}
.stars label.star {
  float: right;
  margin:0 2px;
  transition: all .2s;
}
.stars input.star:checked ~ label.star:before {
  color: #1E93C8;
  content: '\f005';
  transition: all .25s;
}
.stars input.star:nth-of-type(1):checked ~ label.star:before {
  color: #1E93C8;
  text-shadow: 0 0 2px #008A72;
}
.stars input.star:nth-of-type(5):checked ~ label.star:before {color: #F62}
.stars label.star:hover {transform: rotate(75deg) scale(1.3)}
.stars label.star:before {
  content: '\f006';
  font-family: 'FontAwesome';
}