HTML5: 如何在带图片的单选按钮上使用“required”属性？

Question

假设我向用户提供了一些选项。用户只能 select 一个选项，因此使用单选按钮。不是向用户显示无聊的单选按钮，而是显示图像，当单击时，select 一个单选按钮。

单选按钮被隐藏，这导致 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 会导致 "required" 弹出窗口被隐藏。

相反，您可以尝试使用极小的缩放进行绝对定位：

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

JSBin

HTML5: 如何在带图片的单选按钮上使用“required”属性？

HTML5: How to use the “required” attribute with a radio button with image?

html

radio-button

required