Wie designe ich eine Sternchen-Bewertung für meine Webseite? (CSS Anleitung)

Heute machen wir wieder was sehr spassiges und zwar zeige ich euch wie ihr eine einfache Sternchen Bewertung für eure Webseite designen könnt.

Ihr wisst schon was eine Sternchenbewertung ist – diese 1-5 Sterne (oder mehr) die man anklicken kann um etwas zu bewerten. Eigentlich sind es nur ein paar Radio-Buttons die man dafür braucht und mit ein wenig CSS kann man die als Sternchen umdesignen.

Video

HTML

<div class="rating">
      <input value="5" name="rate" id="star5" type="radio" />
      <label title="text" for="star5"></label>
      <input value="4" name="rate" id="star4" type="radio" />
      <label title="text" for="star4"></label>
      <input value="3" name="rate" id="star3" type="radio" checked="" />
      <label title="text" for="star3"></label>
      <input value="2" name="rate" id="star2" type="radio" />
      <label title="text" for="star2"></label>
      <input value="1" name="rate" id="star1" type="radio" />
      <label title="text" for="star1"></label>
    </div>

CSS

:root {
  --seiten-bg: #220261;
  --leer-color: #cacaca;
  --stern-color: #ff0800;
  --hover-color: #ff6795;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--seiten-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.rating:not(:checked) > input {
  position: absolute;
  appearance: none;
}

.rating:not(:checked) > label {
  float: right;
  cursor: pointer;
  font-size: 5rem;
  color: var(--leer-color);
}

.rating:not(:checked) > label:before {
  content: "★";
}

/* färbt die anderen ein */
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: var(--hover-color);
}

/* farbe gesetzt */
.rating > input:checked ~ label {
  color: var(--stern-color);
}