如何在表单中使用图像作为选项答案

【问题标题】：How to use an Image as an option in a form如何在表单中使用图像作为选项
【发布时间】：2021-05-05 01:39:17
【问题描述】：

使用最新的 Bootstrap v4.0 beta，我正在尝试创建一个表单来创建一个帐户。

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

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

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

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

【问题讨论】：

标签： html twitter-bootstrap bootstrap-4

【解决方案1】：

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

您可以通过使用无线电输入并使用引导类 sr-only 隐藏它们来非常轻松地做到这一点。然后将图像和样式应用于标签

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

label {
  cursor: pointer;
  filter: grayscale(100%);
}

label:hover {
  filter: grayscale(0);
}
input[type="radio"]:checked + label {
  filter: grayscale(0);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset>
  <legend>
    Please select gender
  </legend>
  <input type="radio" name="gender" class="sr-only" id="male">
  <label for="male">
    <img src="http://findicons.com/files/icons/1688/web_blog/48/user_male_white_red_brown.png" alt="male">
  </label>
  <input type="radio" name="gender" class="sr-only" id="female">
  <label for="female">
    <img src="http://findicons.com/files/icons/1688/web_blog/48/user_female_white_pink_black.png" alt="female">
  </label>
</fieldset>

【讨论】：

谢谢！这就是我要找的