Home » CSS 3 » CSS Star Rating

CSS Star Rating

CSS Star Rating

Star Rating possible with CSS?

Star Rating possible with CSS? Do you think that we can create rating widget in our form without using any jquery plugin? Yes, it is possible. Using labels, radio buttons and few lines of css3, we can create star rating. The following is the html and css for the 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;
		}

Demo for Star Rating

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. This is way star rating is achieved.

For more css tricks and tips, please visit CSS Stars

Leave a Reply

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

*
*