HTML5：画像にラジオボタンを付けて「必須」属性を使用するにはどうすればよいですか？

Question

私はいくつかのオプションをユーザーに提示していると言います。ユーザーは1つのオプションしか選択できないため、ラジオボタンを使用できます。退屈なラジオボタンをユーザに表示する代わりに、画像が提示され、クリックされると、ラジオボタンが選択される。

ラジオボタンが非表示になっていますこれは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

私はむしろ見えるラジオよりも画像を、持つことができるように私はこの問題を解決するにはどうすればよいですボタンを押しても、依然として必要な属性を使用していますか？

Answer 1

設定display: noneは、「必須」ポップアップを非表示にします。

代わりに、あなたは非常に小さいズームで絶対配置を試みることができる：

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

JSBin