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 - Wertigkeiten verändern mit der !important-Regel

PHP - Begrüßung der Besucher

JavaScript - Trim-Funktion in JavaScript

MySQL - Datensatz Wert um 10% veringern