PROWARE technologies
PROWARE technologies

Five Star Rating Form/System Using Only HTML/CSS

Use pure CSS to implement a five star rating feature. No transforms or other odd tricks are needed. It is all very straight forward and has hover effects as the user would expect.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>5-STAR RATING</title>
	<style>
		*,
		*::before,
		*::after {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		html,
		body {
			background-color: black;
			color: white;
		}
		.center {
			min-height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.rating input {
			display: none;
		}
		.rating {
			display: flex;
		}
		.rating > label {
			display: block;
			width: 50px;
			height: 50px;
			font-size: 50px;
			color: yellow; /* color browser dependent */
			font-family: sans-serif;
			opacity: 0.33;
			transition: opacity .2s; /* OPTIONAL */
		}
		
		#star-1:checked ~ label[for="star-1"],
		#star-1:hover ~ label[for="star-1"],

		#star-2:checked ~ label[for="star-1"],
		#star-2:checked ~ label[for="star-2"],
		#star-2:hover ~ label[for="star-1"],
		#star-2:hover ~ label[for="star-2"],

		#star-3:checked ~ label[for="star-1"],
		#star-3:checked ~ label[for="star-2"],
		#star-3:checked ~ label[for="star-3"],
		#star-3:hover ~ label[for="star-1"],
		#star-3:hover ~ label[for="star-2"],
		#star-3:hover ~ label[for="star-3"],

		#star-4:checked ~ label[for="star-1"],
		#star-4:checked ~ label[for="star-2"],
		#star-4:checked ~ label[for="star-3"],
		#star-4:checked ~ label[for="star-4"],
		#star-4:hover ~ label[for="star-1"],
		#star-4:hover ~ label[for="star-2"],
		#star-4:hover ~ label[for="star-3"],
		#star-4:hover ~ label[for="star-4"],

		#star-5:checked ~ label[for="star-1"],
		#star-5:checked ~ label[for="star-2"],
		#star-5:checked ~ label[for="star-3"],
		#star-5:checked ~ label[for="star-4"],
		#star-5:checked ~ label[for="star-5"],
		#star-5:hover ~ label[for="star-1"],
		#star-5:hover ~ label[for="star-2"],
		#star-5:hover ~ label[for="star-3"],
		#star-5:hover ~ label[for="star-4"],
		#star-5:hover ~ label[for="star-5"] {
			opacity: 1;
		}
	</style>
</head>
<body>
	
	<div class="center">
		<form action="/set-star-rating" method="post">
			<div class="rating">
				<input type="radio" name="star" id="star-1" value="1">
				<input type="radio" name="star" id="star-2" value="2">
				<input type="radio" name="star" id="star-3" value="3">
				<input type="radio" name="star" id="star-4" value="4">
				<input type="radio" name="star" id="star-5" value="5">
				<label for="star-1">&#11088;</label>
				<label for="star-2">&#11088;</label>
				<label for="star-3">&#11088;</label>
				<label for="star-4">&#11088;</label>
				<label for="star-5">&#11088;</label>
			</div>
		</form>
	</div>

</body>
</html>

Coding Video

https://youtu.be/_TVy2Sp7sBw