Inspiration For Creative Minds
Home » Labs » 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

It's only fair to share...Share on Google+Tweet about this on TwitterShare on Facebook
Labs

Posts you may like: