Rating Stars with CSS & HTML

PHOTO EMBED

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