HTML5 : 이미지에 라디오 버튼과 함께 "필수"속성을 사용하는 방법은 무엇입니까?

Question

사용자에게 몇 가지 옵션이 제공됩니다. 사용자는 하나의 옵션 만 선택할 수 있으므로 라디오 버튼을 사용할 수 있습니다. 지루한 라디오 버튼을 사용자에게 표시하는 대신 이미지가 표시되고 클릭하면 라디오 버튼이 선택됩니다.

라디오 단추가으로 숨겨져 있으며 required 특성에 문제가 있습니다.

라디오 단추가 숨겨져 있기 때문에 필요한 특성이 잠시 표시된 다음 사라집니다. 라디오 버튼을 볼 수있게하면 모든 것이 의도 한대로 작동합니다. 나는 이미지를 가질 수 있도록 내가 보이는 라디오가 아니라,이 문제를 해결할 수있는 방법 Demo

:

<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를 참조하십시오됩니다 : 여기

내 마크 업입니다 버튼을 클릭하고 필요한 속성을 계속 사용합니까?

Answer 1

설정 display: none은 "필수"팝업을 숨 깁니다.

대신 소문자 줌 절대 위치를 시도 할 수 :

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

JSBin