सीएसएस रेटिंग सितारे तीर कुंजियों के साथ समस्या

Question

मुझे अपने रेटिंग सितारे सिस्टम के साथ कोई समस्या है जो शुद्ध सीएसएस का उपयोग कर रहा है। मेरी समस्या यह है कि जब मैं सितारों का चयन करने के लिए तीर कुंजियों का उपयोग करता हूं ... यह पीछे की तरफ है। बाईं ओर जाने के लिए मुझे दाएं या दायां तीर कुंजी जाने के लिए बाएं तीर कुंजी का उपयोग करना होगा। मैंने फ्लोट्स के साथ खेलने की कोशिश की लेकिन इससे मदद नहीं मिली। मैंने मार्कअप को पुनर्व्यवस्थित करने का भी प्रयास किया लेकिन मेरे समान परिणाम थे।

.rating { 
 
    float: left; 
 
} 
 

 
.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:checked~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 #B57340, .1em .1em .2em rgba(0, 0, 0, .5); 
 
} 
 

 
.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: #ea0; 
 
    text-shadow: 1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0, 0, 0, .5); 
 
} 
 

 
.rating>label:active { 
 
    position: relative; 
 
    top: 2px; 
 
    left: 2px; 
 
}

<fieldset class="rating"> 
 
    <legend>Please rate:</legend> 
 
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label> 
 
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label> 
 
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label> 
 
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label> 
 
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label> 
 
</fieldset>

JSFiddle Demo

Answer 1

के रूप में @ randomguy04 पहले से ही काम आते हुए कहा, उलट रेडियो बटन की वजह से डोम में उलट किया जा रहा है। वहाँ के रूप में कोई रास्ता नहीं HTML में बटन एक आदेश असाइन करते हैं, तो आप इस तरह उदाहरण के लिए, अपने मार्कअप को बदलने का अधिकार आदेश में <input> के शामिल करना होगा:

<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> 

सीएसएस यह काम करने के लिए आवश्यक थोड़ी बदसूरत हो जाती है, क्योंकि सीएसएस को माता-पिता और पिछले भाई बहनों के लिए चयनकर्ताओं की कमी होती है, जिससे प्रतिपादन को अनुकूलित करना आसान हो जाता है। कुछ इस तरह काम करेगा:

.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); 
} 

ध्यान दें, रेडियो बटन में ऊपर तीर पिछले बटन का चयन करता है, जबकि नीचे तीर बटन का चयन करता है। यह व्यवहार, जो नियमित रेडियो बटन के साथ बहुत स्वाभाविक है, आपके रेटिंग सितारों के साथ सहज ज्ञान युक्त प्रतीत हो सकता है। मुझे डर है, हालांकि, केवल सीएसएस का उपयोग करके, ऊपर और नीचे स्विच किए बिना केवल बाएं और दाएं तीर कुंजियों को स्विच करने का कोई तरीका नहीं है।

Fiddle