Simple 5 star Rating using Pure CSS

Today, We want to share with you Simple 5 star Rating using Pure CSS.In this post we will show you How To Create a Simple Star Rating with CSS, hear for Simple 5-star Rating System with CSS and Html Radios we will give you demo and example for implement.In this post, we will learn about A simple star rating system using vanilla JS, CSS and HTML with an example.

Simple 5 star Rating using Pure CSS

There are the Following The simple About Simple 5 star Rating using Pure CSS Full Information With Example and source code.

As I will cover this Post with live Working example to develop Setting stars color on hover in star rating system, so the turn a number into star rating display using jquery and css for this example is following below.

Read Also:  Vuejs Autocomplete Input Tags component

Pure CSS Star Rating Example

simple HTML with Pure CSS Star Rating System With Color Change

index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8'>
	
	<title>Pure CSS Star Rating System With Color Change</title>
	
	<style>
		.star-plugin{
			float:left;
			width: auto;
			margin:6% 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: 25px;
			text-align: center;
			font-size: 52px;
			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;
		}
	</style>
</head>

<body>
<div class="star-plugin">
	<p>Simple CSS3 Star rating system demo with tutorial</p>
			<div class="css3-rating-stars">
				<form>
					<input type="radio" name="star-rating-1" id="star-rating-1-0" value="5" />
					<label for="star-rating-1-0"></label>
					<input type="radio" name="star-rating-1" id="star-rating-1-1" value="4" />
					<label for="star-rating-1-1"></label>
					<input type="radio" name="star-rating-1" id="star-rating-1-2" value="3" />
					<label for="star-rating-1-2"></label>
					<input type="radio" name="star-rating-1" id="star-rating-1-3" value="2" />
					<label for="star-rating-1-3"></label>
					<input type="radio" name="star-rating-1" id="star-rating-1-4"  value="1" />
					<label for="star-rating-1-4"></label>
				</form>
			</div>
		</div>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Read Also:  Simple CSS Star Rating plugin

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Simple 5 star Rating using Pure CSS.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.