Werner-Zenk.de - Zur Startseite

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).

Bausteine

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

CSS - Position Sticky in einer HTML Tabelle

PHP - Ausgabe von Wörtern begrenzen

JavaScript - Checkboxen JavaScript-Funktion zuweisen

MySQL - Doppelte Einträge in der Tabelle finden