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!

Bausteine

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

CSS - Mit ::selection markierten Text hervorheben

PHP - Mnemonisches Passwort erstellen

JavaScript - Geburtstag anzeigen

MySQL - Datensätze einer Tabelle zählen