Einfache Sterne Bewertung (star rating) mit CSS (ohne JavaScript) und Formularfeldern (Radio Button)

Hintergrund für ein eigenes Bewertungssystem

Um die Qualität der Handyreparaturen der Werkstätten von handyreparaturvergleich.de für unsere Kunden vergleichbar zu machen, sollte ein einfaches Bewertungssystem integriert werden. Zunächst nutzen wir hierfür die Shop-Bewertungen (trustedshops, etc.) unserer Werkstätten. Der große Nachteil dabei war allerdings, dass die Werkstätten unterschiedlich gute (valide) Systeme nutzten bzw. nicht alle Werkstätten ein Bewertungssystem (wegen der teilweise hohen Kosten)  integriert hatten. Weiterhin gestaltete sich der Zugriff auf die Daten vom Bewertungssystem oft schwierig. Aus diesem Grund entschieden wir uns für die Entwicklung eines eigenen, unabhängigen Bewertungssystems für die Handy-Reparaturen unserer Werkstätten
.

Eigene Sterne-Bewertung mit CSS und Formularfeldern (Radio Buttons)

Für das Bewertungssystem suchten wir nach einer einfachen Sterne-Bewertungs-Komponente auf Basis von CSS und Standard-Formular-Feldern, um die Browserunabhängigkeit und die Verwendbarkeit auf mobilen Endgeräten zu gewährleisten. Das Grundgerüst für eine solche Lösung fanden wir unter http://digualized.com/creating-a-pure-css-star-rating-selection/. Die Lösung nutzte bereits Input Felder (Radio Buttons) für die Sterne-Bewertung. Da diese Lösung allerdings mit invertierten Sternen funktionierte, der Hover-Effekt fehlte und ein Verlaufs-Effekt sowie unterschiedliche Größen bei den Sternen gewünscht waren, wurden einige Anpassungen vorgenommen. Ein Demo-Beispiel für die CSS-Sterne-Bewertung kann hier runtergeladen werden (Download CSS-Star-Rating).