Home » Labs » Simple CSS3 Star rating system demo with tutorial  

Simple CSS3 Star rating system demo with tutorial


Filed under Labs

Here is a simple 5 star rating demo with code which is built on pure CSS (CSS3). Bottom of the explanation code you can find the live demo button. If you think its is useful then please share!

CSS

		.wrapper{
			float:left;
			width: auto;
			margin:8% 0 0 35%;
		}
		.css3-rating-stars,
		.css3-rating-stars label::before{
			display: inline-block;
		}
		.css3-rating-stars label:hover,
		.css3-rating-stars label:hover ~ label{
			color: #06befb;
		}
		.css3-rating-stars *{
			margin: 0;
			padding: 0;
		}
		.css3-rating-stars input{
			display: none;
		}
		.css3-rating-stars{
			unicode-bidi: bidi-override;
			direction: rtl;
		}
		.css3-rating-stars label{
			color: #ccc;
		}
		.css3-rating-stars label::before{
			content: "\2605";
			width: 48px;
			line-height: 18px;
			text-align: center;
			font-size: 48px;
			cursor: pointer;
		}
		.css3-rating-stars input:checked ~ label{
			color: #f5b301;
		}
		.css3-rating-disabled{
			opacity: .50;
			-webkit-pointer-events: none;
			-moz-pointer-events: none;
			pointer-events: none;
		}

HTML

		<div class="wrapper">
		<!-- css3-rating-stars -->
			<div class="css3-rating-stars">
				<form>
					<input type="radio" name="group-1" id="group-1-0" value="5" />
					<label for="group-1-0"></label>
					<input type="radio" name="group-1" id="group-1-1" value="4" />
					<label for="group-1-1"></label>
					<input type="radio" name="group-1" id="group-1-2" value="3" />
					<label for="group-1-2"></label>
					<input type="radio" name="group-1" id="group-1-3" value="2" />
					<label for="group-1-3"></label>
					<input type="radio" name="group-1" id="group-1-4"  value="1" />
					<label for="group-1-4"></label>
				</form>
			</div>
		<!-- /css3-rating-stars -->
		</div>

Live Demo

Posts you may like: