Star Rating on CSS

Star Rating on CSS

<!-- HTML -->
<div class="star-box">
  <input id="rating-5" type="radio" name="rating" value="5" />
  <label class="star-lbl" for="rating-5"></label>
  <input id="rating-4" type="radio" name="rating" value="4" />
  <label class="star-lbl" for="rating-4"></label>
  <input id="rating-3" type="radio" name="rating" value="3" />
  <label class="star-lbl" for="rating-3"></label>
  <input id="rating-2" type="radio" name="rating" value="2" />
  <label class="star-lbl" for="rating-2"></label>
  <input id="rating-1" type="radio" name="rating" value="1" />
  <label class="star-lbl" for="rating-1"></label>                
</div>


/* SCSS */

.star-box {
	display: inline-block;
    	padding-left: 15px;
		.star-lbl {
			float: right;
			display: block;
			width: 48px;
			height: 45px;
			margin-right: 10px;
			cursor: pointer;
			background:transparent url('../image/icons/favorite_green.png') center no-repeat;
		}
		input[type="radio"] {
			position: absolute;
			opacity: 0 !important;
			&:checked ~ label,
			&:hover ~ label {
				background:transparent url('../image/icons/favorite_green_active.png') center no-repeat;
			}
		}
	}