Nach Klick auf Rdaio Button Sprung nach oben
Hallo zusammen,
ich habe mein erstes HTML Formular mit Bootstrap fertiggestellt. Es ist responsive und es klappt wirklich so gut wie alles. Habe mir online TuT von SelfHTML durchgelesen und probiert.
Im Formular kann bewertet werden, wenn der User eine Bewertung (Radio-Button) anklickt, springt die Seite automatisch an den Seitenanfang, natürlich nur, wenn die Seite nicht auf eine Seite passt. Auf dem Handy passiert das nicht, nur wenn ich Chrome so klein schiebe, dass gescrollt werden muss.
Der hier verwendete Code
<style>
body {
background: #E4E8F1;
font-family: 'Exo 2', sans-serif;
}
label {
font-weight: bold;
}
.blockheader {
background: #6E92BB;
font-weight: bold;
border: 1px #000 solid;
padding: 4px;
margin: 10px 0;
}
.rating {
display:flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.flex-row{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.rating:not(:checked) > input {
display:none;
position:absolute;
}
.rating:not(:checked) > label {
width:1.0em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
line-height:20px;
font-size:150%;
color:#9FA2A9;
}
.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;
}
*/
</style>
<div class="form">
<div class="form-row">
<div class="col-12 blockheader">
<span>Wie bewerten Sie uns?</span>
</div>
</div>
<div class="form-row">
<div class="col-12">
<div class="form-row flex-row">
<div class="col-12 col-sm-12 col-md-3">
<label for="bd">Bewertung</label>
</div>
<div class="col-12 col-sm-12 col-md-9" id="bd">
<div class="rating">
<input type="radio" id="star1bd" name="ratingbd" value="1" /><label for="star1bd" title="Sehr gut!"></label>
<input type="radio" id="star2bd" name="ratingbd" value="2" /><label for="star2bd" title="Gut!"></label> <input type="radio" id="star3bd" name="ratingbd" value="3" /><label for="star3bd" title="Befriedigend"></label>
<input type="radio" id="star4bd" name="ratingbd" value="4" /><label for="star4bd" title="Ausreichend"></label>
<input type="radio" id="star5bd" name="ratingbd" value="5" /><label for="star5bd" title="Mangelhaft"></label>
<input type="radio" id="star6bd" name="ratingbd" value="6" /><label for="star6bd" title="Ungenügend"></label>
</div>
</div>
</div>
</div>
</div>
</div>