HTML5:如何将“required”属性与带图像的单选按钮一起使用

Question

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

单选按钮被隐藏，这导致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：演示

如何修复此问题，使我可以拥有图像，而不是可见的单选按钮，并且仍然使用所需的属性？

Answer 1

设置display: none会隐藏"必需"弹出窗口。

相反，你可以尝试用微小的变焦进行绝对定位：

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

JSBin