CSS - Sternebewertung

Diese Bewertung kommt ganz ohne JavaScript aus und funktioniert nur mit HTML und CSS.



Die Bewertung ohne den Radiobutton, die Auswahl kann dann nicht mehr abgewählt werden!



Der Radiobutton wurde in diesem Beispiel mit CSS display:none unsichtbar gemacht.
Auf "Bewertung" klicken um die Bewertung abzuwählen.


Hier nun das Script für das erste Beispiel


<style>

/* Sternebewertung */

span#Bewertung {
 
line-height45px;
}

span.sternebewertung {
 
floatLeft;
}

span.sternebewertung:not(:checked) > input {
 
displayNone;
}

span.sternebewertung:not(:checked) > label {
 
floatRight;
 
width1em;
 
padding0 .1em;
 
overflowHidden;
 
white-spaceNowrap;
 
cursorPointer;
 
font-size200%;
 
line-height1.2;
 
color#D0D0D0;
 
text-shadow1px 1px #B0B0B0, 2px 2px #606060, .1em .1em .2em rgba(0,0,0,.5);
 
transitionall .5s;
}

span.sternebewertung:not(:checked) > label:before {
 
content'★ ';
}

span.sternebewertung input:checked label {
 
color#FFD700;
 
text-shadow1px 1px #C06000, 2px 2px #904000, .1em .1em .2em rgba(0,0,0,.5);
}

span.sternebewertung:not(:checked) > label:hover,
span.sternebewertung:not(:checked) > label:hover label {
 
color#FFD700;
 
text-shadow1px 1px #F29E02, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

span.sternebewertung input:checked label:hover,
span.sternebewertung input:checked label:hover label,
span.sternebewertung input:checked label:hover,
span.sternebewertung input:checked label:hover label,
span.sternebewertung label:hover input:checked label {
 
color#F9B500;
 
text-shadow1px 1px #F8BA01, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}
</
style>

<
p>
<
span class="sternebewertung">
 <
input type="radio" id="stern5" name="bewertung" value="5"><label for="stern5" title="5 Sterne">5 Sterne</label>
 <
input type="radio" id="stern4" name="bewertung" value="4"><label for="stern4" title="4 Sterne">4 Sterne</label>
 <
input type="radio" id="stern3" name="bewertung" value="3"><label for="stern3" title="3 Sterne">3 Sterne</label>
 <
input type="radio" id="stern2" name="bewertung" value="2"><label for="stern2" title="2 Sterne">2 Sterne</label>
 <
input type="radio" id="stern1" name="bewertung" value="1"><label for="stern1" title="1 Stern">1 Stern</label>
 <
span id="Bewertung"><label><input type="radio" name="bewertung" value="0" checked="checked"Bewertung:</label></span>
</
span>
</
p>

Die "Sterne" werden ab Internet Explorer Version 9 angezeigt (frühere Versionen zeigen nur die Radiobuttons mit der Beschriftung).

Die Sternebewertung sollte in ein Formular eingebunden werden in dem noch mehr Daten des Benutzers abgefragt werden. Ansonsten ist man der Manipulation des Benutzers ausgeliefert!

CSS-Datei sternebewertung.css als ZIP-Datei herunterladen: sternebewertung.zip

Bausteine

Eine zufällige Auswahl von „Bausteinen” (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Bild mit Impuls

PHP - Auf eine Zahl prüfen

JavaScript - Markierten Text in ein Eingabefeld einfügen

MySQL - Eintrag überschreiben