Star Rating with CSS

Star Rating with CSS

Now a days, in almost all websites, 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 the 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…

Since the Star rating widget is very common, and it may be used many times in our web application, it is always better to use the minimum HTML, CSS and Javascript for creating the star rating widget. So let us see how to create a Star Rating widget without using any jquery or plugins. A star rating widget 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 rating widget. Using labels, radio buttons and few lines of css3, we can achieve this. The following is the html and css for the Star Rating.

CSS Star Rating

HTML for Star Rating

   < !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;
		}

Result for CSS Star Rating

Star Rating with CSS

How star rating works?

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 star rating image, so clicking on a star would select a radio button with appropriate value.

Browser compatibility

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

label, , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

About the author