从图像组中选择图像

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？）