making a star rating input


Ok so its not something new. We’ve seen those 5 stars for rating on numerous website. I’ll show how you can create the star rating system with CSS. Mostly we come across 1star to 5star type rating. I’ve added the fractional ratings as well. So we have a 0star – 0.5star – 1star – 1.5star — 5star type rating. Check the demo here.

Lets see how its done:

The HTML

First since we want user to be able to ‘click’ on the star image to provide his input, we’ll need anchor tags, 10 of them : 0.5, 1. 1.5 and so on. Now to apply some common css on those anchor tags we’ll wrap all the links inside a <p> and <span> tag. So, the HTML required is:

<p class="stars">
<span>
	<a class="star-05" href="#">0.5</a>
	<a class="star-10" href="#">1</a>
	<a class="star-15" href="#">1.5</a>
	<a class="star-20" href="#">2</a>
	<a class="star-25" href="#">2.5</a>
	<a class="star-30" href="#">3</a>
	<a class="star-35" href="#">3.5</a>
	<a class="star-40" href="#">4</a>
	<a class="star-45" href="#">4.5</a>
	<a class="star-50" href="#">5</a>
</span>
</p>

 

THE CSS

Overview: the height, of the links are fixed. All the links are absolutely positioned, starting from the same point and lie one below the other. But their width varies. So the first one has highest z-index and is 10px wide, next would be 20 px wide and z-index a bit lower and so on.. All the links are transparent and have no background in normal/inactive state. The inactive star image acts as the background for <span> and as we hover over the links, active star image is set as the background of the link.

Without further ado, here’s the CSS

/*==========================*/
/*css for half star feature*/
p.stars {
  overflow: hidden;
  zoom: 1;
}
p.stars span {
  width: 500px;
  height: 100px;
  position: relative;
  float: left;
  
}
p.stars span a {
  float: left;
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 0;
  padding-top: 100px;
  overflow: hidden;
}
p.stars span{background: url(images/star-inactive.png);}

p.stars span a.star-05,
p.stars span a.star-15,
p.stars span a.star-25,
p.stars span a.star-35,
p.stars span a.star-45
{
	width:50px;
}

p.stars span a.star-05{z-index:30; width:50px;}
p.stars span a.star-10{z-index:29; width:100px;}
p.stars span a.star-15{z-index:28; width:150px;}
p.stars span a.star-20{z-index:27; width:200px;}
p.stars span a.star-25{z-index:26; width:250px;}
p.stars span a.star-30{z-index:25; width:300px;}
p.stars span a.star-35{z-index:24; width:350px;}
p.stars span a.star-40{z-index:23; width:400px;}
p.stars span a.star-45{z-index:22; width:450px;}
p.stars span a.star-50{z-index:21; width:500px;}

p.stars span a.star-05:hover, p.stars span a.star-05.active, p.stars span a.star-05:focus,
p.stars span a.star-15:hover, p.stars span a.star-15.active, p.stars span a.star-15:focus,
p.stars span a.star-25:hover, p.stars span a.star-25.active, p.stars span a.star-25:focus,
p.stars span a.star-35:hover, p.stars span a.star-35.active, p.stars span a.star-35:focus,
p.stars span a.star-45:hover, p.stars span a.star-45.active, p.stars span a.star-45:focus
{
	background:url(images/half-star.png) repeat-x center right;
}

p.stars span a.star-10:hover, p.stars span a.star-10.active, p.stars span a.star-10:focus,
p.stars span a.star-20:hover, p.stars span a.star-20.active, p.stars span a.star-20:focus,
p.stars span a.star-30:hover, p.stars span a.star-30.active, p.stars span a.star-30:focus,
p.stars span a.star-40:hover, p.stars span a.star-40.active, p.stars span a.star-40:focus,
p.stars span a.star-50:hover, p.stars span a.star-50.active, p.stars span a.star-50:focus
{
	background:url(images/star-active.png) repeat-x center right;
}

I’ve taken each image as 100px wide (for demonstration purpose), Scale everthing proportionately if you are decreasing the size of the star images.
On the demo page, I’ve also used a bit of javascript to record the value that user selected and to assign a class ‘active’ to the link clicked.

That’s it in here.


Published by

Chandan Chaudhary

Chandan is a WordPress guy. A programmer at heart. He loves building community sites with WordPress and BuddyPress.

11 thoughts on “making a star rating input”

  1. How would i go about making this into an input for an e-mail form?
    Kind Regards
    Jonathan
    P.S how do i get a text box like this with editing for my website?

    1. I am not too sure about the email form. The value that user provides(by clicking on the rating image), is being captured with javascript here, so it’d be difficult to make it work in an email form. But i am not sure about that.

      And i didn’t quite get what u meant by the ‘textbox’..

  2. I found a solution and will upload it later on.
    I was wondering though how to get the area I am writing in now with all it’s formatting tools?

    Regards
    Jonathan

  3. Looks good, Chandan. So how would you generate a static view of the stars? Like if a product has a rating of 3.5, and you want to display those fixed stars regardless of any hovering or clicking. I’d just take screenshots from the demo, but I want the background to stay transparent.

  4. Hi Chandan,

    This is exactly what I was looking and it server the purpose for me and works like a charm. Thank you very much.

Leave a Reply

Your email address will not be published. Required fields are marked *