CSS Star Rating

Star rating widgets are most common on websites now a days. We can see option for rating pages, articles, products etc… Almost all the cases we can see star rating widget for rating a product which you bought or an article/solution which you read. Most of them are using star rating widget, where you can rate out of five stars. It is always good to have a rating widget in your web applications. This will help the visitor or the user of the application to know how good is the solution given for any problems, any product which the customer wants to buy etc…

Rating Stars widget

Since the rating widget is very common and it may be used many times on our web application, it is always better to use the minimum HTML, CSS and Javascript for creating it. So let us see how to create a Star Rating widget without using any jquery or plugins. It can be achieved with few lines of CSS and HTML radio button.

Star Rating possible with CSS?

Do you think that we can create rating widget/star rating in our form without using any jquery plugin? Yes, it is possible to create star rating widget. Using labels, radio buttons and few lines of css3, we can achieve this. The following is the html and css for the Rating widget.

CSS Stars Rating widget

HTML for Star Rating

This is a CSS only approach to creating a rating widget on your webpage using plain HTML and CSS3.

   < !DOCTYPE html>
   <head>
       <title>CSS Star Rating</title>
   </head>
   <body>
     <div class="rating-wrapper">
        <input type="radio" class="rating-input" id="rating-input-1-5" name="rating-input-1"/>
        <label for="rating-input-1-5" class="rating-star"></label>
        <input type="radio" class="rating-input" id="rating-input-1-4" name="rating-input-1"/>
        <label for="rating-input-1-4" class="rating-star"></label>
        <input type="radio" class="rating-input" id="rating-input-1-3" name="rating-input-1"/>
        <label for="rating-input-1-3" class="rating-star"></label>
        <input type="radio" class="rating-input" id="rating-input-1-2" name="rating-input-1"/>
        <label for="rating-input-1-2" class="rating-star"></label>
        <input type="radio" class="rating-input" id="rating-input-1-1" name="rating-input-1"/>
        <label for="rating-input-1-1" class="rating-star"></label>
     </div>
  </body>
</html>

CSS for Star Rating

.rating-wrapper {
		overflow: hidden;
		display: inline-block;
		}
.rating-input {
		position: absolute;
		left: 0;
		top: -50px;
		}
.rating-star:hover,
.rating-star:hover ~ .rating-star {
		background-position: 0 0;
		}
.rating-wrapper:hover .rating-star:hover,
.rating-wrapper:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
	        background-position: 0 0;
		}
.rating-star,
.rating-wrapper:hover .rating-star {
		float: right;
		display: block;
		width: 16px;
		height: 16px;
		background: url('http://css-stars.com/wp-content/uploads/2013/12/stars.png') 0 -16px;
		}

Demo for CSS Star Rating

Stars Rating Demo

How rating works?

Here we are using an image sprite to show the stars. When we hover on the star, the background position is changed. The radio buttons are hidden and the star is used as the background of labels. When we click on the label.star, radio input is checked. Checked inputs background position is changed and the rating is shown in golden colors.

When you have a label for a form element, clicking on that label will cause a radio button or a checkbox to get checked. It is a good practice in general but it’s absolutely essential here since we are going to use labels as the rating image. So clicking on a star would select a radio button with appropriate value. This is the way rating widget is achieved only with CSS and HTML.

Browser compatibility

The only pseudo selector used in our example is the :checked selector. So this will not work in older versions of IE.

Leave a Reply

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