Question

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

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

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

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

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

1 个答案: