CSS評級星星與箭頭鍵問題

我有我的評級星系統使用純CSS的問題。我的問題是，當我使用箭頭鍵選擇星星......它是倒退。我必須使用左箭頭鍵去向右或向右箭頭鍵向左走。我試着玩弄浮筒，但沒有幫助。我也嘗試重新排列標記，但我有類似的結果。CSS評級星星與箭頭鍵問題

.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

來源

2017-08-08 TrickMonkey

這是一個奇怪的一個。向上和向下箭頭鍵按預期工作。也許看看單選按鈕如何響應箭頭鍵？ – HarvP

你有沒有試過在評分課上使用方向：rtl？您可能需要更改一些填充並修復文本和按鈕順序的順序，以確保值不會倒退，但這可能會使箭頭按正確的方向啓動。 – wpalmes

這實際上並不奇怪，使用向上/向左導航鍵將使焦點朝同一個方向移動，所以如果你「修復」了一個，你會打破另一個。你得到這種行爲的原因是因爲你依靠不隱藏你的收音機輸入，而是使它們不可見，而不是爲了獲得關鍵的導航，並且最重要的是你「調整」你的CSS來顯示你的星星在右邊順序（從低到高），但關鍵導航只知道它們在DOM上聲明的順序。看到你自己的小提琴這樣的視覺理解。 https://jsfiddle.net/aLcu114w/4/ – randomguy04

作爲@ randomguy04已經有益指出的那樣，反轉是由於無線電按鈕在DOM被逆轉。由於沒有辦法分配按鈕在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>

，使這項工作所需的CSS有點難看，因爲CSS缺乏父母和兄弟姐妹的選擇器，使渲染更容易優化。像這樣的東西會工作：

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

注意，在單選按鈕上箭頭選擇上一個按鈕，而向下箭頭，選擇下一個按鈕。這種行爲對於普通的單選按鈕來說非常自然，可能與您的評分明星不符。但是，我擔心，只使用CSS，沒有辦法只切換左右方向鍵而不切換頂部和底部。

Fiddle

來源

2017-08-12 15:40:22 Nuvanda

CSS評級星星與箭頭鍵問題

回答

相關問題