小编典典

使用复选框之类的图像

all

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

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

谷歌 Recaptcha 截图

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

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

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

阅读 94

2022-08-08

共1个答案

小编典典

纯语义 HTML/CSS 解决方案

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

这是你需要做的：

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

例子：

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

2022-08-08