Html 如何将图像用作表单中的选项

使用最新的Bootstrap v4.0测试版，我试图创建一个表单来创建一个帐户

在本例中，如果我希望用户选择男性或女性，我将尝试使用图像，而不是下拉或单选按钮

<div class="form-group">
  <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option style="background-image: url(images/male.png);">Male</option>
      <option style="background-image: url(images/female.png);">Female</option>
    </select>
</div>

示例选择
男性
女性

我曾尝试将其用作图像类，但它将图像视为提交按钮

---

有没有办法选择男按钮或女按钮作为选择器？

对于这种类型的表单控件，您应该使用单选按钮，因为用户只允许进行一次选择

通过使用无线电输入并仅使用引导类

sr将其隐藏，您可以很容易地做到这一点。然后将图像和样式应用于标签

（我添加了一些随机CSS以显示何时选择了某个选项，因此可以随意修改以满足您的需要）


标签{
光标：指针；
滤镜：灰度（100%）；
}
标签：悬停{
过滤器：灰度（0）；
}
输入[type=“radio”]：选中+标签{
过滤器：灰度（0）；
}

请选择性别
谢谢！这就是我要找的