html - 如何使用图像作为表单中的选项

Question

使用最新的 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>

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

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

Answer 1

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

通过使用 radio 输入并使用 Bootstrap 类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>