Zurück zur Übersicht

CSS: Pures CSS Star Rating ohne Javascript

#Tutorials#CSS

Bewertungen auf Webseiten sind ein beliebtes Element. Viele dieser Bewertungssysteme sind allerdings mit Javascript gebaut, meistens mit jQuery. Dies ist nicht mehr nötig und geht mitlerweile komplett ohne Javascript. Der Wert, der aus der Bewertung kommt, ist zudem ein ganz noramales Formular-Feld und kann direkt so benutzt werden.

Hier das Markup für das Sternen-Rating

<div class="star-form">
  <input type="radio" id="rate5" name="rating" value="5" />
  <label for="rate5" title="Amazing"><span class="icon-star">&#9733;</span></label>
  <input type="radio" id="rate4" name="rating" value="4" />
  <label for="rate4" title="Very Good"><span class="icon-star">&#9733;</span></label>
  <input type="radio" id="rate3" name="rating" value="3" />
  <label for="rate3" title="Average"><span class="icon-star">&#9733;</span></label>
  <input type="radio" id="rate2" name="rating" value="2" />
  <label for="rate2" title="Not good"><span class="icon-star">&#9733;</span></label>
  <input type="radio" id="rate1" name="rating" value="1" />
  <label for="rate1" title="Terrible"><span class="icon-star">&#9733;</span></label>
</div>

Wichtig ist, dass das Markup nicht umgebaut wird, bzw. man hier keine weiteren Elemente verschachtelt, da sonst das folgende CSS nicht mehr funktioniert.

CSS

.star-form {
  display: block;
  position: relative;
  width: 90px;
  min-height: 60px;
  padding: 0;
  border: none;
  float: left;
}

.star-form > input {
  position: absolute;
  margin-right: -100%;
  opacity: 0;
}

.star-form > input:checked ~ label,
.star-form > input:focus ~ label,
.star-form > input:hover ~ label {
  color: #faaa38;
}

.star-form > input:focus + label {
  outline: 1px dotted #999;
}

.star-form > label {
  position: relative;
  display: inline-block;
  float: right;
  width: 18px;
  height: 30px;
  color: #3a4752;
  cursor: pointer;
  background-repeat: no-repeat;
}

Funktionsweise

Die Rückwärtssortierung sorgt dafür, dass beim Hover/Klick auf einen Stern, die vorherigen mit dem CSS-Siblings-Selektor angesprochen werden können. So werden alle Label Elemente nach dem 5 Sterne Input Orange gestylt, wenn das 5-Sterne Input gehovered oder geklickt wird. 

Demo


Kommentare

  • Franzi
    Hey Andre, danke für das Tutorial! Hatte es vorher auch mit Javascript gelöst, aber finde diese Lösung viel eleganter.
    LG Franzi
    Antworten

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.