Tutorials

Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.

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

ERROR: Content Element with uid "3714" and type "ar_codeelem" has no rendering definition!

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

CSS

ERROR: Content Element with uid "3715" and type "ar_codeelem" has no rendering definition!

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.