使用复选框之类的图像

Question

我想有一个标准复选框的替代品-基本上我想使用图像，当用户单击图像时，将其淡出并覆盖一个复选框。

本质上，我想做像 Recaptcha 2 那样让你点击满足特定标准的图像时所做的事情。您可以 在此处查看 Recaptcha 演示， 但有时它可能会让您解决文本问题，而不是图像选择。所以这里有一个截图：

当您单击其中一个图像（在本例中，包含一张牛排图片）时，您单击的图像会缩小并出现蓝色勾号，表示您已勾选它。

假设我想重现这个确切的例子。

我意识到我可以有 9 个隐藏的复选框，并附加一些 jQuery，这样当我单击图像时，它会选择/取消选择隐藏的复选框。但是图像的缩小/覆盖刻度呢？

原文由 bgs264 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

纯语义 HTML/CSS 解决方案

这很容易自行实施，无需预先制定的解决方案。它还会教你很多东西，因为你似乎不太容易使用 CSS。

这是你需要做的：

您的复选框需要具有不同的 id 属性。这允许您使用标签的 for 属性将 <label> 连接到它。

例子：

 <input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>

将标签附加到复选框将触发浏览器行为：每当有人单击标签（或其中的图像）时，复选框将被切换。

接下来，通过应用 display: none; 来隐藏复选框。

现在剩下要做的就是为您的 label::before 伪元素（将用作可视复选框替换元素）设置您想要的样式：

 label::before {
    background-image: url(../path/to/unchecked.png);
}

在最后一个棘手的步骤中，您使用 CSS’ :checked 伪选择器在选中复选框时更改图像：

 :checked + label::before {
    background-image: url(../path/to/checked.png);
}

+ （ _相邻兄弟选择器_）确保您只更改直接跟随标记中隐藏复选框的标签。

您可以通过将两个图像放在 spritemap 中并仅在 background-position 中应用更改而不是交换图像来优化它。

当然，您需要正确定位标签并应用 display: block; 并正确设置 width 和 height 。

编辑：

我在这些说明之后创建的 codepen 示例和代码片段使用相同的技术， 但不是使用复选框的图像，而是纯粹使用 CSS 完成复选框替换，在标签上创建一个 ::before ，一旦检查，有 content: "✓"; 。添加一些圆形边框和甜美的过渡，结果真的很讨人喜欢！

这是一个展示该技术的工作代码笔，并且不需要复选框的图像：

http://codepen.io/anon/pen/wadwpx

这是片段中的相同代码：

 ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="cb"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked+label {
  border-color: #ddd;
}

:checked+label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked+label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

 <ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
  </li>
  <li><input type="checkbox" id="cb3" />
    <label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
  </li>
  <li><input type="checkbox" id="cb4" />
    <label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
  </li>
</ul>

原文由 connexo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

纯 CSS 解决方案

调用了三个简洁的设备：

1. :checked 选择器
2. ::before 伪选择器
3. css content 属性。

 label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
  position: absolute;
  z-index: 100;
}
:checked+label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
}
input[type=checkbox] {
  display: none;
}
/*pure cosmetics:*/
img {
  width: 150px;
  height: 150px;
}
label {
  margin: 10px;
}

 <input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0LkgDZRDTgnDrzhnXGDFRSItAzGCBEWEnkLMdnA_zkIH5Zg6oag">
</label>
<input type="checkbox" id="myCheckbox2" />
<label for="myCheckbox2">
  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhJjGB3mQxjhI5lfS9SwXou06-2qT_0MjNAr0atu75trXIaR2d">
</label>
<input type="checkbox" id="myCheckbox3" />
<label for="myCheckbox3">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQuwWbUXC-lgzQHp-j1iw56PIgl_2eALrEENUP-ld72gq3s8cVo">
</label>

原文由 jcuenod 发布，翻译遵循 CC BY-SA 3.0 许可协议