为了账号安全,请及时绑定邮箱和手机立即绑定

使用类似复选框的图像

/ 猿问

使用类似复选框的图像

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


本质上,当您单击符合特定条件的图像时,我想做类似Recaptcha 2的操作。您可以在此处看到Recaptcha演示,但有时可能会带您解决文本问题,而不是选择图片。

单击其中一张图像(在本例中,其中包含牛排的图像)时,单击的图像尺寸会缩小,并出现蓝色对勾,表示已对它进行了对勾。


假设我要重现此确切示例。


我意识到我可以有9个隐藏的复选框,并附加一些jQuery,以便当我单击图像时,它可以选择/取消选择隐藏的复选框。但是,图像缩小/覆盖刻度线又如何呢?


查看完整描述

3 回答

?
HUWWW

纯语义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);

}

在最后一个棘手的步骤中,当选中:checked此复选框时,您将利用CSS的伪选择器更改图像:


: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="http://lorempixel.com/100/100" /></label>

  </li>

  <li><input type="checkbox" id="cb2" />

    <label for="cb2"><img src="http://lorempixel.com/101/101" /></label>

  </li>

  <li><input type="checkbox" id="cb3" />

    <label for="cb3"><img src="http://lorempixel.com/102/102" /></label>

  </li>

  <li><input type="checkbox" id="cb4" />

    <label for="cb4"><img src="http://lorempixel.com/103/103" /></label>

  </li>

</ul>


查看完整回答
反对 2020-02-03
?
慕码人2483693

纯CSS解决方案

调用了三种整洁的设备:


该:checked选择

该::before伪选择

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>


查看完整回答
反对 2020-02-03
?
喵喔喔

看到这个jQuery插件:imgCheckbox(在npm和bower上)


免责声明:解决此问题无需使用javascript。张力介于代码的可维护性和效率之间。尽管不需要插件(或任何Javascript),但可以肯定的是,它可以加快构建速度,并且通常更易于更改。


准系统解决方案:

使用非常简单的HTML(没有复选框和标签等混乱情况):


<img class="checkable" src="http://lorempixel.com/100/100" />

您可以使用jQuery的toggleClass打开/关闭事件中的selected或checked类click:


$("img.checkable").click(function () {

    $(this).toggleClass("checked");

});

托运的物品与


$(".checked")

加上凉爽:

您可以基于此设置图像的样式,但是一个很大的问题是,如果没有其他DOM元素,您甚至无法使用它::before并::after添加诸如复选标记之类的内容。解决方案是用另一个元素包装图像(将点击侦听器也附加到包装的元素也很有意义)。


$("img.checkable").wrap("<span class='fancychecks'>")

这使您的html真正干净,并且您的js具有难以置信的可读性。看一下片段...


使用imgCheckbox jQuery插件:

受以上解决方案的启发,我构建了一个插件,该插件可以像以下那样轻松使用:


$("img").imgCheckbox();

将选中图像的数据注入到表单中

支持自定义复选标记

支持定制的CSS

支持预选元素

支持无线电组,而不是简单地切换图像

有事件回调

合理的默认值

轻巧且超级易于使用

实际操作(并查看源代码)


查看完整回答
反对 2020-02-03

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信