Jako @ randomguy04 już usłużnie wskazał, odwrócenie wynika z przycisków radiowych są odwrócone w DOM. Ponieważ nie jest w żaden sposób przypisać przyciski ze Zlecenia w formacie HTML, trzeba będzie zmienić znaczników aby zawierać <input> „s we właściwej kolejności, dla przykładu tak:
<fieldset class="rating">
<legend>Please rate:</legend>
<input type="radio" id="star1" name="rating" value="1">
<input type="radio" id="star2" name="rating" value="2">
<input type="radio" id="star3" name="rating" value="3">
<input type="radio" id="star4" name="rating" value="4">
<input type="radio" id="star5" name="rating" value="5">
<label for="star5" title="Rocks!">5 stars</label>
<label for="star4" title="Pretty good">4 stars</label>
<label for="star3" title="Meh">3 stars</label>
<label for="star2" title="Kinda bad">2 stars</label>
<label for="star1" title="Sucks big time">1 star</label>
</fieldset>
CSS wymagane do tej pracy robi się trochę brzydka, ponieważ CSS nie ma selektorów dla rodziców i wcześniejszego rodzeństwa, aby uczynić rendering łatwiejszym do zoptymalizowania. Coś jak to będzie działać:
.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:1em;
padding:0 .1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:200%;
line-height:1.2;
color:#ddd;
text-shadow: 1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}
.rating:not(:checked) > label:before {
content: '★ ';
}
.rating > input#star1:checked ~ label[for="star1"],
.rating > input#star1:checked ~ label[for="star1"] ~ label,
.rating > input#star2:checked ~ label[for="star2"],
.rating > input#star2:checked ~ label[for="star2"] ~ label,
.rating > input#star3:checked ~ label[for="star3"],
.rating > input#star3:checked ~ label[for="star3"] ~ label,
.rating > input#star4:checked ~ label[for="star4"],
.rating > input#star4:checked ~ label[for="star4"] ~ label,
.rating > input#star5:checked ~ label[for="star5"],
.rating > input#star5:checked ~ label[for="star5"] ~ label {
color: #f70;
text-shadow: 1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: gold;
text-shadow: 1px 1px goldenrod, 2px 2px #B74, .1em .1em .2em rgba(0,0,0,.5);
}
.rating > input#star1:checked ~ label[for="star1"]:hover,
.rating > input#star1:checked ~ label[for="star1"] ~ label:hover,
.rating > input#star2:checked ~ label[for="star2"]:hover,
.rating > input#star2:checked ~ label[for="star2"] ~ label:hover,
.rating > input#star3:checked ~ label[for="star3"]:hover,
.rating > input#star3:checked ~ label[for="star3"] ~ label:hover,
.rating > input#star4:checked ~ label[for="star4"]:hover,
.rating > input#star4:checked ~ label[for="star4"] ~ label:hover,
.rating > input#star5:checked ~ label[for="star5"]:hover,
.rating > input#star5:checked ~ label[for="star5"] ~ label:hover,
.rating > input#star1:checked ~ label[for="star1"]:hover ~ label,
.rating > input#star1:checked ~ label[for="star1"] ~ label:hover ~ label,
.rating > input#star2:checked ~ label[for="star2"]:hover ~ label,
.rating > input#star2:checked ~ label[for="star2"] ~ label:hover ~ label,
.rating > input#star3:checked ~ label[for="star3"]:hover ~ label,
.rating > input#star3:checked ~ label[for="star3"] ~ label:hover ~ label,
.rating > input#star4:checked ~ label[for="star4"]:hover ~ label,
.rating > input#star4:checked ~ label[for="star4"] ~ label:hover ~ label,
.rating > input#star5:checked ~ label[for="star5"]:hover ~ label,
.rating > input#star5:checked ~ label[for="star5"] ~ label:hover ~ label,
.rating > input#star1:checked ~ label:hover ~ label[for="star1"],
.rating > input#star1:checked ~ label:hover ~ label[for="star1"] ~ label,
.rating > input#star2:checked ~ label:hover ~ label[for="star2"],
.rating > input#star2:checked ~ label:hover ~ label[for="star2"] ~ label,
.rating > input#star3:checked ~ label:hover ~ label[for="star3"],
.rating > input#star3:checked ~ label:hover ~ label[for="star3"] ~ label,
.rating > input#star4:checked ~ label:hover ~ label[for="star4"],
.rating > input#star4:checked ~ label:hover ~ label[for="star4"] ~ label,
.rating > input#star5:checked ~ label:hover ~ label[for="star5"],
.rating > input#star5:checked ~ label:hover ~ label[for="star5"] ~ label {
color: #ea0;
text-shadow:1px 1px goldenrod, 2px 2px #B74, .1em .1em .2em rgba(0,0,0,.5);
}
Zauważ, że w przyciski radiowe strzałki w górę wybiera poprzedni przycisk, a strzałka w dół wybiera następny przycisk. To zachowanie, które jest bardzo naturalne w przypadku zwykłych przycisków radiowych, może wydawać się sprzeczne z twoimi gwiazdami ratingowymi. Obawiam się jednak, że używając tylko CSS, nie można zmienić tylko lewej i prawej strzałki bez przełączania górnej i dolnej.
Fiddle
To jest dziwne. Klawisze strzałek w górę i w dół działają zgodnie z oczekiwaniami. Może zaglądasz, w jaki sposób przyciski radiowe reagują na klawisze strzałek? – HarvP
Czy próbowałeś użyć kierunku: rtl na klasie oceny? Prawdopodobnie będziesz musiał zmienić niektóre wypełnienia i ustalić kolejność tekstu i kolejności przycisków, aby upewnić się, że wartości nie są cofnięte, ale może to spowodować, że klawisze strzałek będą we właściwym kierunku, aby rozpocząć. – wpalmes
To wcale nie jest dziwne, nawigacja za pomocą klawiszy w górę/w lewo powoduje, że fokus porusza się w tym samym kierunku, więc jeśli "naprawisz" jeden, złamiesz drugi. Przyczyną tego zachowania jest to, że polegasz na tym, że nie ukrywasz swoich wejść radiowych, ale czynisz je niewidocznymi, aby uzyskać kluczową nawigację, a na dodatek "podkręcasz" swój CSS, aby pokazać swoje gwiazdy po prawej stronie (od niskiego do wysokiego), jednak kluczowa nawigacja jest świadoma kolejności, w jakiej zostały zadeklarowane tylko w DOM. zobacz swoje własne skrzypce, aby wizualnie to zrozumieć. https://jsfiddle.net/aLcu114w/4/ – randomguy04