All posts tagged HTML

Quick Star Buttons

Ever want to just insert a star rating into your website with CSS, HTML & Basic jQuery? There are a bunch of scripts out there that’ll give you fancy images or crazy javascript but most of the time you just want a basic star rating with nothing flashy. This will do the trick. No images and no fuss. Also it is ready to insert directly into a form to submit your review!

Ok, we should stop talking and dive in!

First: The HTML

<input type="hidden" name="review[stars]" id="star-rating" />
<dl>
    <dt>Rating: </dt>
    <dd>
	    <div class="rating">
		<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
	    </div>
    </dd>
</dl>

Second: The CSS

.info-reviews .rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.info-reviews textarea, .info-reviews input.text {
	width: 100%;
}
.info-reviews .rating > span, .info-reviews .rated > span {
  display: inline-block;
  position: relative;
  font-size: 15px;
  width: 1.5em;
  cursor: pointer;
}
.info-reviews .rating > span:hover:before,
.info-reviews .rating > span:hover ~ span:before,
.info-reviews .rating > span.selected:before {
   content: "\2605";
   position: absolute;
   color: #27a8df;
}

Third: The jQuery

$(document).ready(function()
{
	$('.rating span').click(function() {
		$('.rating span').removeClass('selected');
		found = false; obj = this; stars = 0;
		$('.rating span').each(function() {
			if (this == obj)
				found = true;
			if (found)
			{
				$(this).addClass('selected');
				stars++;
			}
		});
		$('#star-rating').val(stars);
	});
});

And there you have it effortless star ratings that can be popped right into your form without uploading any images and will reflect a number 1-5 when the form is submitted. An added bonus is if you just add more stars they’ll work. Want a rating 1-10? Just add 5 more stars.