Rating Stars

HTML

<div class="rating_wrap">
	<p>How do you rate this product?</p>
	<div class="rating || validate_radio">
		<input type="radio" id="star5" name="reviews[rate]" value="5">
		<label for="star5"></label>
		<input type="radio" id="star4" name="reviews[rate]" value="4">
		<label for="star4"></label>
		<input type="radio" id="star3" name="reviews[rate]" value="3">
		<label for="star3"></label>
		<input type="radio" id="star2" name="reviews[rate]" value="2">
		<label for="star2"></label>
		<input type="radio" id="star1" name="reviews[rate]" value="1">
		<label for="star1"></label>
		<div class="clearfix"></div>
	</div>
</div>

CSS

.rating{display:block;width:15rem;margin:0 auto}
.rating.validate_radio.validate_error input[type='radio'] + label::before{border:none!important;color:#e57373}
.rating.validate_radio.validate_error input[type='radio']:checked ~ label::before{color:#f1cd06}
.rating input[type='radio'] + label{float:right;position:relative;width:3rem;height:3rem;cursor:pointer;padding-left:0;display:inline-block;margin-right:0;margin-bottom:0;-webkit-border-radius:unset;-moz-border-radius:unset;border-radius:unset}
.rating input[type='radio'] + label:not(:first-of-type){padding-right:.2rem}
.rating input[type='radio'] + label::before{content:"\2605";font-size:2.7rem;color:#ccc;line-height:1;position:static;left:unset;top:unset;right:unset;width:2rem;height:2rem;border:none;background:transparent;-webkit-border-radius:unset;-moz-border-radius:unset;border-radius:unset;-webkit-transition:none;-o-transition:none;-moz-transition:none;transition:none}
.rating input[type='radio'] + label::after{display:none!important}
.rating input{display:none}
.rating input[type='radio']:checked ~ label::before,.rating:not(:checked) > label:hover::before,.rating:not(:checked) > label:hover ~ label::before{color:#f1cd06;background-color:transparent;border:none}

SCSS

/* Vars */
$validate:        #e57373;

.rating {
	display: block;
	width: 15rem;
	margin: 0 auto;
	
	&.validate_radio.validate_error {
		input[type='radio'] + label {
			&::before {
				border: none !important;
				color: $validate;
			}
		}
		
		input[type='radio']:checked ~ label::before {
			color: #f1cd06;
		}
	}
	
	input[type='radio'] + label {
		float: right;
		position: relative;
		width: 3rem;
		height: 3rem;
		cursor: pointer;
		padding-left: 0;
		display: inline-block;
		margin-right: 0;
		margin-bottom: 0;
		border-radius: unset;
		
		&:not(:first-of-type) {
			padding-right: .2rem;
		}
		
		&::before {
			content: "\2605";
			font-size: 2.7rem;
			color: #ccc;
			line-height: 1;
			position: static;
			left: unset;
			top: unset;
			right: unset;
			width: 2rem;
			height: 2rem;
			border: none;
			background: transparent;
			border-radius: unset;
			-webkit-transition: none;
			-o-transition: none;
			transition: none;
		}
		
		&::after {
			display: none !important;
		}
	}
	
	input {
		display: none;
	}
}

.rating input[type='radio']:checked ~ label::before,
.rating:not(:checked) > label:hover::before,
.rating:not(:checked) > label:hover ~ label::before {
	color: #f1cd06;
	background-color: transparent;
	border: none;
}