CSS Cookbook

Building a better star-rater widget


As a challenge to myself, I wanted to see if I could construct a star-rating widget that was superior to others offered, while using fewer images, less markup, less style information, and hopefully no javascript.


For an upcoming project I'm a part of, there might be *lots* of these on a page. They should be fast.

If the project decides to ditch them, well... it was fun coding.

Reference examples:


Of those, the ones I found most compelling:


*on Win32 - have yet to check OSX


Currently rated: 3 stars
Currently rated: 4 stars
Currently rated: 1 star

<div class="starRate">
<div>Currently rated: 3 stars<b></b></div>
<li><a href="#"><span>Give it 5 stars</span></a></li>
<li><a href="#"><span>Give it 4 stars</span></a></li>
<li><a href="#"><span>Give it 3 stars</span><b></b></a></li>
<li><a href="#"><span>Give it 2 stars</span></a></li>
<li><a href="#"><span>Give it 1 star</span></a></li>
/* 'star-rating' component */
.starRate {position:relative; margin:20px; overflow:hidden; zoom:1;}
.starRate ul {width:160px; margin:0; padding:0;}
.starRate li {display:inline; list-style:none;}
.starRate a, .starRate b {background:url(img/star_rate.gif) left top repeat-x;}
.starRate a {float:right; margin:0 80px 0 -144px; width:80px; height:16px; background-position:left 16px; color:#000; text-decoration:none;}
.starRate a:hover {background-position:left -32px;}
.starRate b {position:absolute; z-index:-1; width:80px; height:16px; background-position:left -16px;}
.starRate div b {left:0px; bottom:0px; background-position:left top;}
.starRate a span {position:absolute; left:-300px;}
.starRate a:hover span {left:90px; width:100%;}