This is a very quick and simple tutorial on how to make star ratings very easily. We just need a css sprite image containing 3 different colored stars, radio buttons and some simple logic to design the css. Lets’s look at the code now.

html file:

<form id="ratingsForm">
	<div class="stars">
		<input type="radio" name="star" class="star-1" id="star-1" />
		<label class="star-1" for="star-1">1</label>
		<input type="radio" name="star" class="star-2" id="star-2" />
		<label class="star-2" for="star-2">2</label>
		<input type="radio" name="star" class="star-3" id="star-3" />
		<label class="star-3" for="star-3">3</label>
		<input type="radio" name="star" class="star-4" id="star-4" />
		<label class="star-4" for="star-4">4</label>
		<input type="radio" name="star" class="star-5" id="star-5" />
		<label class="star-5" for="star-5">5</label>

We are hiding the default radio buttons and using some labels for existence of the radios. There is an empty span tag also which will be used to display the stars.

css file:

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 ~ span {
  width: 100% !important;
form .stars ~ span {
  width: 80% !important;
form .stars ~ span {
  width: 60% !important;
form .stars ~ span {
  width: 40% !important;
form .stars ~ 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;

Just changing the width of the span tag according to the hover and checked state of the radio buttons. And also the background position is being changed (so that the sprite can display the right image.

The demo and source code is provided below. You can directly download and use it in your project.
live-demo-button download-button