Rating Stars with CSS & HTML
Tue Jan 11 2022 09:08:37 GMT+0000 (UTC)
Saved by
@Kristi
#css
#html
//HTML
<div class="container">
<div class="star-widget">
<input type="radio" name="rate" id="rate-5" />
<label for="rate-5" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-4" />
<label for="rate-4" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-3" />
<label for="rate-3" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-2" />
<label for="rate-2" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-1" />
<label for="rate-1" class="fas fa-star"></label>
</div>
</div>
//CSS
html,
body {
display: grid;
height: 100%;
place-items: center;
text-align: center;
background-color: rgb(16, 16, 16);
}
.container {
width: 400px;
background-color: #111;
padding: 20px 30px;
border: 1px solid #444;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
/* STARS */
.star-widget input {
display: none;
}
.star-widget label {
font-size: 40px;
color: #444;
padding: 10px;
float: right;
cursor: pointer;
transition: all 0.2s ease;
}
input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label {
color: #fd4;
}
input:checked ~ label {
color: #fd4;
}
input#rate-5:checked ~ label {
color: #fe7;
text-shadow: 0 0 20px #952;
}
content_copyCOPY
rating stars with plain HTML CSS
https://www.youtube.com/watch?v=rw3eZ6XodN8
Comments