<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dremo Bewertungsportal</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style>
.rating {
float:left;
}
/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t
follow these rules. Every browser that supports :checked also supports :not(), so
it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
position:absolute;
top:-9999px;
clip:rect(0,0,0,0);
}
.rating:not(:checked) > label {
float:right;
width:1.0em;
/* padding:0 .1em; */
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:150%;
/* line-height:1.2; */
color:#ddd;
}
.rating:not(:checked) > label:before {
content: '★ ';
}
.rating > input:checked ~ label {
color: #ef7900;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: #ef7900;
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: #ef7900;
}
.rating > label:active {
position:relative;
top:0px;
left:0px;
}
label {
vertical-align: sub;
}
</style>
</head>
<body>
<div class="container">
<form class="form">
<div class="form-row">
<div class="col">
<div class="form-row">
<div class="col-sm">
<label for="at">Arbeitstempo</label>
</div>
<div class="col-sm" id="at">
<div class="rating" style="vertical-align: top;">
<input type="radio" id="star1at" name="ratingat" value="1" /><label for="star1at" title="Sehr gut!">1</label>
<input type="radio" id="star2at" name="ratingat" value="2" /><label for="star2at" title="Gut!">2</label>
<input type="radio" id="star3at" name="ratingat" value="3" /><label for="star3at" title="Befriedigend">3</label>
<input type="radio" id="star4at" name="ratingat" value="4" /><label for="star4at" title="Ausreichend">4</label>
<input type="radio" id="star5at" name="ratingat" value="5" /><label for="star5at" title="Mangelhaft">5</label>
<input type="radio" id="star6at" name="ratingat" value="6" /><label for="star6at" title="Ungenügend">6</label>
</div>
</div>
</div>
</div>
<div class="col">
<div class="form-row">
<div class="col-sm">
<label for="fw">Fachwissen</label>
</div>
<div class="col-sm" id="fw">
<div class="rating" style="vertical-align: top;">
<input type="radio" id="star1fw" name="ratingfw" value="1" /><label for="star1fw" title="Sehr gut!">1</label>
<input type="radio" id="star2fw" name="ratingfw" value="2" /><label for="star2fw" title="Gut!">2</label>
<input type="radio" id="star3fw" name="ratingfw" value="3" /><label for="star3fw" title="Befriedigend">3</label>
<input type="radio" id="star4fw" name="ratingfw" value="4" /><label for="star4fw" title="Ausreichend">4</label>
<input type="radio" id="star5fw" name="ratingfw" value="5" /><label for="star5fw" title="Mangelhaft">5</label>
<input type="radio" id="star6fw" name="ratingfw" value="6" /><label for="star6fw" title="Ungenügend">6</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<div class="form-row">
<div class="col-sm">
<label for="gn">Genauigkeit</label>
</div>
<div class="col-sm" id="gn">
<div class="rating" style="vertical-align: top;">
<input type="radio" id="star1gn" name="ratinggn" value="1" /><label for="star1gn" title="Sehr gut!">1</label>
<input type="radio" id="star2gn" name="ratinggn" value="2" /><label for="star2gn" title="Gut!">2</label>
<input type="radio" id="star3gn" name="ratinggn" value="3" /><label for="star3gn" title="Befriedigend">3</label>
<input type="radio" id="star4gn" name="ratinggn" value="4" /><label for="star4gn" title="Ausreichend">4</label>
<input type="radio" id="star5gn" name="ratinggn" value="5" /><label for="star5gn" title="Mangelhaft">5</label>
<input type="radio" id="star6gn" name="ratinggn" value="6" /><label for="star6gn" title="Ungenügend">6</label>
</div>
</div>
</div>
</div>
<div class="col">
<div class="form-row">
<div class="col-sm">
<label for="pk">Pünktlichkeit</label>
</div>
<div class="col-sm" id="pk">
<div class="rating" style="vertical-align: top;">
<input type="radio" id="star1pk" name="ratingpk" value="1" /><label for="star1pk" title="Sehr gut!">1</label>
<input type="radio" id="star2pk" name="ratingpk" value="2" /><label for="star2pk" title="Gut!">2</label>
<input type="radio" id="star3pk" name="ratingpk" value="3" /><label for="star3pk" title="Befriedigend">3</label>
<input type="radio" id="star4pk" name="ratingpk" value="4" /><label for="star4pk" title="Ausreichend">4</label>
<input type="radio" id="star5pk" name="ratingpk" value="5" /><label for="star5pk" title="Mangelhaft">5</label>
<input type="radio" id="star6pk" name="ratingpk" value="6" /><label for="star6pk" title="Ungenügend">6</label>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>