HTML5：如何通過帶圖像的單選按鈕使用「必需」屬性？

說我有一些選項提供給用戶。用戶只能選擇一個選項，因此使用單選按鈕。不是向用戶顯示無聊的單選按鈕，而是顯示圖像並單擊時選擇一個單選按鈕。HTML5：如何通過帶圖像的單選按鈕使用「必需」屬性？

單選按鈕被隱藏並且這導致與required屬性的問題。

由於單選按鈕被隱藏，所需的屬性會顯示一會兒然後消失。如果我使單選按鈕可見，則一切按預期工作。

這裏是我的標記：

<div class="form-group travelmodes"> 
    <label for="car" style="border: 1px solid; background-image: url(/transportation-icons-06.png?width=200&amp;crop=0,0,200,200);"> 
     <span>Car</span> 
     <input id="car" name="TravelMode" required type="radio" value="af60da7e-e0f6-438f-b633-a64e00b9a720"> 
    </label> 
    <label for="aeroplane" style="border: 1px solid; background-image: url(/transportation-icons-09.png?width=200&amp;crop=0,0,200,200);"> 
     <span>Aeroplane</span> 
     <input id="aeroplane" name="TravelMode" required type="radio" value="5fb4cb1e-6de2-4eb4-acf6-a64e00b9a721"> 
    </label> 
</div>

如果上面不明確，請參閱本JSBin： Demo

我怎樣才能解決這個問題，這樣我可以有影像，而不是可見光無線電按鈕，並仍然使用必需的屬性？

來源

2016-07-25 pookie

設置display: none會導致隱藏「必需」彈出框。

相反，你可以試試絕對定位有微小變焦：

#invisible input[type="radio"] { 
    position: absolute; 
    zoom: 0.1; 
}

JSBin

來源

2016-07-25 13:00:32

謝謝，這是不行的！ – pookie

HTML5：如何通過帶圖像的單選按鈕使用「必需」屬性？

回答

相關問題