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： Demo

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

Answer 1

设置display: none会导致隐藏“必需”弹出窗口。

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

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

JSBin

HTML5：如何使用带有图像的单选按钮的“required”属性？

1 个答案: