使用复选框等图片 [英] Use images like checkboxes

问题描述

我想要一个标准复选框的替代方法 - 基本上我想使用图片，当用户点击图片时，淡出并覆盖一个复选框。

在本质上，我想做一些像Recaptcha 2，当它让你点击符合一定标准的图像。您可以

以下是代码段中的相同代码：

 < ul& < li>< input type =checkboxid =cb1/> < label for =cb1>< img src =http://lorempixel.com/100/100/>< / label> < / li> < li>< input type =checkboxid =cb2/> < label for =cb2>< img src =http://lorempixel.com/101/101/>< / label> < / li> < li>< input type =checkboxid =cb3/> < label for =cb3>< img src =http://lorempixel.com/102/102/>< / label> < / li> < li>< input type =checkboxid =cb4/> < label for =cb4>< img src =http://lorempixel.com/103/103/>< / label> < / li>< / ul>  

I would like to have an alternative to a standard checkbox - basically I'd like to use images and when the user clicks the image, fade it out and overlay a tick box.

In essence, I want to do something like Recaptcha 2 does when it gets you to click images that meet a certain criteria. You can see a Recaptcha demo here but it might sometimes get you to solve text questions, as opposed to the image selection. So here's a screenshot:

When you click one of the images (in this case, containing a picture of steak), the image you click shrinks in size and the blue tick appears, indicating that you've ticked it.

Let's say I want to reproduce this exact example.

I realise I can have 9 hidden checkboxes, and attach some jQuery so that when I click the image, it selects/deselects the hidden checkbox. But what about the shrinking of the image/overlaying the tick?

解决方案

Pure semantic HTML/CSS solution

This is easy to implement on your own, no pre-made solution necessary. Also it will teach you alot as you don't seem too easy with CSS.

This is what you need to do:

Your checkboxes need to have distinct id attributes. This allows you to connect a <label> to it, using the label's for-attribute.

Example:

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

Attaching the label to the checkbox will trigger a browser behaviour: Whenever someone clicks the label (or the image inside it), the checkbox will be toggled.

Next, you hide the checkbox by applying for example display: none; to it.

Now all that is left to do is set the style you want for your label:before pseudo element (the checkbox replacement elements):

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

In a last tricky step, you make use of CSS' :checked selector to change the image when the checkbox is checked:

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

The + (adjacent sibling selector) makes sure you only change labels that directly follow the hidden checkbox in the markup.

You can optimize that by putting both images in a spritemap and only applying a change in background-position instead of swapping the image.

Of course you need to position the label correctly and apply display: block; and set correct width and height.

Edit:

The codepen example and snippet, which I created after these instructions, use the same technique, but instead of using images for the checkboxes, the checkbox replacements are done purely with CSS, creating a :before on the label that, once checked, has content: "✓";. Add some rounded borders and sweet transitions and the result is really likable!

Here is a working codepen that showcases the technique and doesn't require images for the checkbox:

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

Here is the same code in a snippet:

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

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>

这篇关于使用复选框等图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！