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);
}