Sternebewertung

Quellcode
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<style>
.stars{height: 150px; width: 70%; text-align:center;}
.stars input{display: none;}
.stars label{float: right; font-size: 3em; color: lightgrey; margin: 0 5px; text-shadow: 1px 1px #bbb;}
.stars label:before{content: '★';}
.stars input:checked ~ label{color: gold; text-shadow: 1px 1px #c60;}
.stars:not(:checked) > label:hover, .stars:not(:checked) > label:hover ~ label{color: gold;}
.stars input:checked > label:hover, .stars input:checked > label:hover ~ label{color: gold; text-shadow: 1px 1px goldenrod;}
.stars .result:before{position: absolute; content: ""; width: 100%; left: 50%; transform: translateX(-47%); top: 200px; font-size: 30px; font-weight: 500; color: green; display: none;}
.stars input:checked ~ .result:before{display: block;}
.stars #five:checked ~ .result:before{content: "Note 1 ";}
.stars #four:checked ~ .result:before{content: "Note 2 ";}
.stars #three:checked ~ .result:before{content: "Note 3 ";}
.stars #two:checked ~ .result:before{content: "Note 4 ";}
.stars #one:checked ~ .result:before{content: "Note 5 ";}
</style>
</head>

<body>
<div class="center">
<div class="stars">
<input type="radio" id="five" name="rate" value="5">
<label for="five"></label>
<input type="radio" id="four" name="rate" value="4">
<label for="four"></label>
<input type="radio" id="three" name="rate" value="3">
<label for="three"></label>
<input type="radio" id="two" name="rate" value="2">
<label for="two"></label>
<input type="radio" id="one" name="rate" value="1">
<label for="one"></label>
<span class="result"></span>
</div>
</div>
</body>

</html>