PROWAREtech

articles » current » css » five-star-rating

CSS: Five Star Rating Form

An example five star rating form 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