頁上的收音機/星移選擇

我使用這裏找到適合多個CSS星級無線電代碼：https://stackoverflow.com/a/27067571/2520920 頁上的收音機/星移選擇

.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: &#9733; 
 
} 
 
.rating > input:checked ~ label { 
 
    color: #ff7700; 
 
    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; 
 
}

<div class="control-group"> 
 
    <label class="control-label" for="meals">Meals</label> 
 
    <div class="controls rating one"> 
 
    <input type="radio" id="star5" name="meals" value="5" /> 
 
    <label for="star5"><span>&#9733</span> 
 
    </label> 
 
    <input type="radio" id="star4" name="meals" value="4" /> 
 
    <label for="star4"><span>&#9733</span> 
 
    </label> 
 
    <input type="radio" id="star3" name="meals" value="3" /> 
 
    <label for="star3"><span>&#9733</span> 
 
    </label> 
 
    <input type="radio" id="star2" name="meals" value="2" /> 
 
    <label for="star2"><span>&#9733</span> 
 
    </label> 
 
    <input type="radio" id="star1" name="meals" value="1" /> 
 
    <label for="star1"><span>&#9733</span> 
 
    </label> 
 
    </div> 
 
</div> 
 

 
<!--added so that you can see the page jump---> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 

 
<div class="control-group"> 
 
    <label class="control-label" for="lodging">Lodging</label> 
 
    <div class="controls rating two"> 
 
    <input type="radio" id="star5-1" name="lodging" value="5" /> 
 
    <label for="star5-1"><span>&#9733</span> 
 
    </label> 
 
    <input type="radio" id="star4-1" name="lodging" value="4" /> 
 
    <label for="star4-1"><span>&#9733</span> 
 
    </label> 
 
    <input type="radio" id="star3-1" name="lodging" value="3" /> 
 
    <label for="star3-1"><span>&#9733</span> 
 
    </label> 
 
    <input type="radio" id="star2-1" name="lodging" value="2" /> 
 
    <label for="star2-1"><span>&#9733</span> 
 
    </label> 
 
    <input type="radio" id="star1-1" name="lodging" value="1" /> 
 
    <label for="star1-1"><span>&#9733</span> 
 
    </label> 
 
    </div> 
 
</div> 
 

 
<!--added so that you can see the page jump---> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 

 
<div class="control-group"> 
 
    <label class="control-label" for="trans">Transportation</label> 
 
    <div class="controls rating three"> 
 
    <input type="radio" id="star5-2" name="trans" value="5" /> 
 
    <label for="star5-2"><span>&#9733</span> 
 
    </label> 
 
    <input type="radio" id="star4-2" name="trans" value="4" /> 
 
    <label for="star4-2"><span>&#9733</span> 
 
    </label> 
 
    <input type="radio" id="star3-2" name="trans" value="3" /> 
 
    <label for="star3-2"><span>&#9733</span> 
 
    </label> 
 
    <input type="radio" id="star2-2" name="trans" value="2" /> 
 
    <label for="star2-2"><span>&#9733</span> 
 
    </label> 
 
    <input type="radio" id="star1-2" name="trans" value="1" /> 
 
    <label for="star1-1"><span>&#9733</span> 
 
    </label> 
 
    </div> 
 
</div>

我每次點擊一個星級，頁面跳轉到頂部。我在.rating > label:active CSS屬性上玩了很多 - 我可以讓頁面靜止不動，但星級不起作用。

任何意見非常感謝。謝謝！

來源

2015-11-11 Big Mike

確保設置一個高度的問題元素（一個或多個）。另外單選按鈕在每個瀏覽器中的行爲都非常不同，解決這個問題的最好方法是在一個範圍內添加，givetje跨越一個高度和寬度，然後完成。 –

@RensTillmann - 這似乎沒有工作''span style =「height：50px; width：250px;」>'是我試圖圍繞每個控制組。我錯過了什麼嗎？ –

不給你的輸入字段和標籤的高度和邊界，看看發生了什麼。或者只是在所有元素上添加邊界，它將使您清楚地瞭解導致問題的位置和原因。通過閱讀你的代碼很難說。 –

使您的位置從絕對固定。

這裏

.rating:not(:checked) > input { 
    position: fixed; 
    top: -9999px; 
    clip: rect(0, 0, 0, 0); 
}

來源

2017-08-26 06:21:15

頁上的收音機/星移選擇

回答

相關問題