articles » current » css » five-star-rating

CSS: Five Star Rating

Five star rating example using only HTML and 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


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE