PROWAREtech
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">⭐</label>
<label for="star-2">⭐</label>
<label for="star-3">⭐</label>
<label for="star-4">⭐</label>
<label for="star-5">⭐</label>
</div>
</form>
</div>
</body>
</html>
Coding Video
Comment
