Question

我希望用户能够从一组图片中选择图片。我想以这样的方式来做：a）表单元素的一部分和b）适用于没有启用javascript的旧浏览器/浏览器。

我考虑过覆盖css以使一组radio buttons显示图像，但看起来很难隐藏子弹。

另一个选择是覆盖option...select结构中的css来显示图像，但这只适用于某些浏览器。

有没有简单的方法可以做到这一点？或者我应该创建两个选项：一个用于使用Javascript的浏览器，另一个用于没有浏览器的浏览器

Answer 1

您可以为每个单选按钮将图像作为<label>的一部分，并使用visibility: hidden或其他内容隐藏单选按钮。

<label>
    <img src="image1.png" alt="Some image" />
    <input type="radio" name="image" value="1" />
</label>

...想到它，这几乎是你给单选按钮一个图像的唯一方法，它应该按预期工作。（除非您打算使用background-image？）