How can I create a checkbox alternative that uses images and shrinks the image upon clicking, overlaying a tick box?

Use Images Like Checkboxes

Problem

Create an alternative to standard checkboxes where users click images to shrink the image and overlay a tick box.

Solution

Pure Semantic HTML/CSS Solution

This solution eliminates the need for pre-made solutions and enhances understanding of CSS techniques.

Steps:

1. Assign unique IDs to checkboxes and connect them to labels using the label's for attribute.
2. Hide checkboxes using CSS (e.g., display: none;).

3. Use the label::before pseudo element as a visual replacement for checkboxes:

   • Set an initial background image for the unchecked state.

4. Utilize the :checked pseudo selector to change the image when the checkbox is checked:

   • Apply a background image for the checked state.
   • Use the sibling selector ( ) to target only labels adjacent to checkboxes.
5. Style the label with correct positioning, display, width, and height.

Edit

Pure CSS Checkbox Replacement

This modification showcases a purely CSS-driven solution without using images:

• Create a ::before element on the label with content "✓".
• Apply rounded borders and transitions to enhance the visual appearance.

Implementation

A codepen example demonstrates this technique in action:

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

Code Snippet

/* Style the labels and images */
label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  /* disable text selection */
  -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%;
}

/* Style the checked state */
: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;
}

/* Style the unordered list that contains the checkboxes */
ul {
  list-style-type: none;
}

/* Style the individual list items */
li {
  display: inline-block;
}

<ul>
  <li><input type="checkbox">

The above is the detailed content of How can I create a checkbox alternative that uses images and shrinks the image upon clicking, overlaying a tick box?. For more information, please follow other related articles on the PHP Chinese website!