Incorporate visual elements such as images that resemble checkboxes

Question

Incorporate visual elements such as images that resemble checkboxes

I'm searching for an innovative approach to replace the traditional checkbox, incorporating images instead. My idea is to have users click on an image, which will then fade out and reveal a tick box overlay.

My inspiration comes from Recaptcha 2, where users are prompted to click on specific images that meet certain criteria. You can take a look at a demo of Recaptcha here, but keep in mind that it may sometimes include text questions instead of just image selection.

In the example I want to replicate, when you click on one of the images (for instance, a picture of steak), the selected image shrinks while a blue checkmark appears over it, indicating your choice.

So how can I recreate this exact scenario? I could hide nine checkboxes and use jQuery to toggle their status when the corresponding image is clicked. But what would be the best way to achieve the shrinking effect and overlaying the tick?

javascript jquery css html

Answer 1

Answer №1

A Creative Approach Using Pure HTML and CSS

You can easily create a unique design without relying on pre-made solutions. This approach will also enhance your CSS skills.

Follow These Steps:

Ensure each checkbox has a different id. Connect the checkbox to a <label> using the label's for attribute.

For example:

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

By linking the label to the checkbox, clicking the label (or image inside it) will toggle the checkbox.

Hide the checkbox by applying styles like display: none;.

Then, customize the style for the label::before pseudo-element to create visual replacements for checkboxes:

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

Utilize CSS' :checked pseudo selector to switch the image when the checkbox is checked:

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

The + (adjacent sibling selector) ensures only labels directly following the hidden checkbox are affected.

You can optimize performance by using spritemaps and changing background-position instead of swapping images.

Remember to position the label correctly, set display: block;, and define appropriate width and height.

Edit:

In my codepen example and snippet linked below, I took this technique further. Instead of images for checkboxes, I used pure CSS to create checkbox replacements. The ::before adds a checkmark (content: "✓") once checked, with rounded borders and smooth transitions for an appealing result!

Explore the working codepen that showcases this technique:

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

View the same code in a snippet below:

<!-- CSS code here -->

<!-- HTML code here -->

Answer 2

A Creative Approach Using Pure HTML and CSS

You can easily create a unique design without relying on pre-made solutions. This approach will also enhance your CSS skills.

Follow These Steps:

Ensure each checkbox has a different id. Connect the checkbox to a <label> using the label's for attribute.

For example:

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

By linking the label to the checkbox, clicking the label (or image inside it) will toggle the checkbox.

Hide the checkbox by applying styles like display: none;.

Then, customize the style for the label::before pseudo-element to create visual replacements for checkboxes:

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

Utilize CSS' :checked pseudo selector to switch the image when the checkbox is checked:

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

The + (adjacent sibling selector) ensures only labels directly following the hidden checkbox are affected.

You can optimize performance by using spritemaps and changing background-position instead of swapping images.

Remember to position the label correctly, set display: block;, and define appropriate width and height.

Edit:

In my codepen example and snippet linked below, I took this technique further. Instead of images for checkboxes, I used pure CSS to create checkbox replacements. The ::before adds a checkmark (content: "✓") once checked, with rounded borders and smooth transitions for an appealing result!

Explore the working codepen that showcases this technique:

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

View the same code in a snippet below:

<!-- CSS code here -->

<!-- HTML code here -->

Answer 3

Answer №2

Using Pure CSS Method

In this solution, three clever techniques are utilized:

The :checked selector
The ::before pseudo-selector
The css content property.

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>

Answer 4

Using Pure CSS Method

In this solution, three clever techniques are utilized:

The :checked selector
The ::before pseudo-selector
The css content property.

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>

Answer 5

Answer №3

Check out this awesome jQuery plugin called imgCheckbox by Jcuenod. You can find it on npm and bower.

Important Note: While JavaScript is not required to solve the issue at hand, using a plugin like this one helps balance code maintainability and efficiency. It speeds up development and simplifies future modifications.

Straightforward Solution:

Create a clean and simple HTML structure without dealing with checkboxes and labels:

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

Utilize jQuery's toggleClass method to toggle the selected or checked class on click events:

$("img.checkable").click(function () {
    $(this).toggleClass("checked");
});

To access checked items, use:

$(".checked")

Enhanced Functionality:

You can customize the styling of images easily with this approach. However, adding additional elements like check marks may require wrapping the images with another element and attaching the click listener to that parent.

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

This keeps your HTML neat and enhances readability in your JS code. Here's an example snippet...

/* Make sure to handle click event on the parent span, not the image itself */
$("img.checkable").wrap("<span class='fancychecks'>")
  .parent().click(function() {
    $(this).toggleClass("checked");
  });

/* Style the images */
span.fancychecks img {
  display: block;
  margin: 0;
  padding: 0;
  transition-duration: 300ms;
  transform: scale(1);
  filter: none;
  -webkit-filter: grayscale(0);
}
span.fancychecks.checked img {
  transform: scale(0.8);
  filter: gray;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

/* Style the parent spans */
span.fancychecks {
  padding: 0;
  margin: 5px;
  display: inline-block;
  border: 1px solid transparent;
  transition-duration: 300ms;
}
span.fancychecks.checked {
  border-color: #ccc;
}

/* Use CSS for creating checkmarks */
span.fancychecks::before {
  background-color: rgba(50, 200, 50, 0.7);
  color: white;
  content: "✓";
  font-weight: bold;
  border-radius: 50%;
  position: absolute;
  margin: 2px;
  top: 1;
  left: 1;
  z-index: 1;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transform: scale(0);
  transition-duration: 300ms;
}
span.fancychecks.checked::before {
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img class="checkable" src="http://lorempixel.com/100/100/city/1" />
<img class="checkable" src="http://lorempixel.com/100/100/city/2" />
<img class="checkable" src="http://lorempixel.com/100/100/city/3" />

Try the imgCheckbox jQuery Plugin:

I've developed a convenient plugin inspired by the solution above. Simply use it as follows:

$("img").imgCheckbox();

Adds data for checked images to your form
Allows custom check marks
Supports customized CSS
Enables preselecting elements
Offers radio groups functionality
Includes event callbacks
Comes with sensible defaults
Lightweight and extremely user-friendly

View it in action (and see the source)

Answer 6

Check out this awesome jQuery plugin called imgCheckbox by Jcuenod. You can find it on npm and bower.

Important Note: While JavaScript is not required to solve the issue at hand, using a plugin like this one helps balance code maintainability and efficiency. It speeds up development and simplifies future modifications.

Straightforward Solution:

Create a clean and simple HTML structure without dealing with checkboxes and labels:

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

Utilize jQuery's toggleClass method to toggle the selected or checked class on click events:

$("img.checkable").click(function () {
    $(this).toggleClass("checked");
});

To access checked items, use:

$(".checked")

Enhanced Functionality:

You can customize the styling of images easily with this approach. However, adding additional elements like check marks may require wrapping the images with another element and attaching the click listener to that parent.

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

This keeps your HTML neat and enhances readability in your JS code. Here's an example snippet...

/* Make sure to handle click event on the parent span, not the image itself */
$("img.checkable").wrap("<span class='fancychecks'>")
  .parent().click(function() {
    $(this).toggleClass("checked");
  });

/* Style the images */
span.fancychecks img {
  display: block;
  margin: 0;
  padding: 0;
  transition-duration: 300ms;
  transform: scale(1);
  filter: none;
  -webkit-filter: grayscale(0);
}
span.fancychecks.checked img {
  transform: scale(0.8);
  filter: gray;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

/* Style the parent spans */
span.fancychecks {
  padding: 0;
  margin: 5px;
  display: inline-block;
  border: 1px solid transparent;
  transition-duration: 300ms;
}
span.fancychecks.checked {
  border-color: #ccc;
}

/* Use CSS for creating checkmarks */
span.fancychecks::before {
  background-color: rgba(50, 200, 50, 0.7);
  color: white;
  content: "✓";
  font-weight: bold;
  border-radius: 50%;
  position: absolute;
  margin: 2px;
  top: 1;
  left: 1;
  z-index: 1;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transform: scale(0);
  transition-duration: 300ms;
}
span.fancychecks.checked::before {
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img class="checkable" src="http://lorempixel.com/100/100/city/1" />
<img class="checkable" src="http://lorempixel.com/100/100/city/2" />
<img class="checkable" src="http://lorempixel.com/100/100/city/3" />

Try the imgCheckbox jQuery Plugin:

I've developed a convenient plugin inspired by the solution above. Simply use it as follows:

$("img").imgCheckbox();

Adds data for checked images to your form
Allows custom check marks
Supports customized CSS
Enables preselecting elements
Offers radio groups functionality
Includes event callbacks
Comes with sensible defaults
Lightweight and extremely user-friendly

View it in action (and see the source)

Answer 7

Answer №4

To enhance the image, I suggest adding an additional div with position: relative; and a class="checked" that matches the same width and height as the image. This div should be positioned at left: 0; top: 0; and initially set to display: none;.

You can then create an event listener for the click event:

$( '.captcha_images' ).click( function() {
    $(this + '.checked').css( 'display', 'block' );
    $(this).animate( { width: '70%', height: '70%' } );
});

This approach allows you to display the icon while also resizing the image to a smaller size.

Note: This example is intended to illustrate the concept, and there may be potential issues or errors in its implementation.

Answer 8

To enhance the image, I suggest adding an additional div with position: relative; and a class="checked" that matches the same width and height as the image. This div should be positioned at left: 0; top: 0; and initially set to display: none;.

You can then create an event listener for the click event:

$( '.captcha_images' ).click( function() {
    $(this + '.checked').css( 'display', 'block' );
    $(this).animate( { width: '70%', height: '70%' } );
});

This approach allows you to display the icon while also resizing the image to a smaller size.

Note: This example is intended to illustrate the concept, and there may be potential issues or errors in its implementation.

Answer 9

Answer №5

I created a demonstration titled "Angular - Use images like checkboxes and radios"

Check out the Stackblitz example here

https://i.sstatic.net/1QsLu.png

https://i.sstatic.net/w9BdM.png

Here's a snippet from the app.component.html file:

<div class="cont-bg">
  <h5 class="text-white">Checkbox</h5>
  <div class="cont-main">
    <div class="cont-checkbox" *ngFor="let car of cars; index as i">
      <input type="checkbox" [id]="'myCheckbox-' + i" />
      <label [for]="'myCheckbox-' + i">
        <img [src]="car.img" />
        <span class="cover-checkbox">
          <svg viewBox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="info">{{ car.name }}</div>
      </label>
    </div>
  </div>
  <h5 class="text-white">Radio</h5>
  <div class="cont-main">
    <div class="cont-checkbox" *ngFor="let car of cars; index as i">
      <input type="radio" name="myRadio" [id]="'myRadio-' + i" />
      <label [for]="'myRadio-' + i">
        <img [src]="car.img" />
        <span class="cover-checkbox">
          <svg viewBox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="info">{{ car.name }}</div>
      </label>
    </div>
  </div>
</div>

This is an excerpt from the app.component.scss file:

* {
  font-family: Lato;
  --transition: 0.15s;
  --border-radius: 0.5rem;
  --background: #ffc107;
  --box-shadow: #ffc107;
  // --box-shadow: #0082ff;
}

.cont-bg {
  min-height: 100vh;
  background-image: radial-gradient(
    circle farthest-corner at 7.2% 13.6%,
    rgba(37, 249, 245, 1) 0%,
    rgba(8, 70, 218, 1) 90%
  );
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cont-main {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.cont-checkbox {
  width: 150px;
  height: 100px;
  border-radius: var(--border-radius);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: transform var(--transition);
  background: white;
  margin-bottom: 0.75rem;
  margin-right: 0.75rem;
  &:active {
    transform: scale(0.9);
  }
  input {
    display: none;
    &:checked + label {
      opacity: 1;
      box-shadow: 0 0 0 3px var(--background);
      .cover-checkbox {
        opacity: 1;
        transform: scale(1);
        svg {
          stroke-dashoffset: 0;
        }
      }
      img {
        -webkit-filter: none; /* Safari 6.0 - 9.0 */
        filter: none;
      }
    }
  }
  label {
    cursor: pointer;
    border-radius: var(--border-radius);
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 0.6;
    img {
      width: 100%;
      height: 70%;
      object-fit: cover;
      clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
      -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
      filter: grayscale(100%);
    }
    .cover-checkbox {
      position: absolute;
      right: 5px;
      top: 3px;
      z-index: 1;
      width: 23px;
      height: 23px;
      border-radius: 50%;
      background: var(--box-shadow);
      border: 2px solid #fff;
      transition: transform var(--transition),
        opacity calc(var(--transition) * 1.2) linear;
      opacity: 0;
      transform: scale(0);
      svg {
        width: 13px;
        height: 11px;
        display: inline-block;
        vertical-align: top;
        fill: none;
        margin: 5px 0 0 3px;
        stroke: #fff;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 16px;
        transition: stroke-dashoffset 0.4s ease var(--transition);
        stroke-dashoffset: 16px;
      }
    }
    .info {
      text-align: center;
      margin-top: 0.2rem;
      font-weight: 600;
      font-size: 0.8rem;
    }
  }
}

The contents of the app.component.ts file include the following:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  cars = [
    {
      id: '1',
      name: 'Mazda MX-5 Miata',
      img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*',
    },
    {
      id: '2',
      name: 'Toyota Supra',
      img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*',
    },
    // Add more car objects here
  ];
}

Pure CSS Checkbox and Radio styles:

* {
  font-family: Lato;
  margin: 0;
  padding: 0;
  --transition: 0.15s;
  --border-radius: 0.5rem;
  --background: #ffc107;
  --box-shadow: #ffc107;
}

.cont-bg {
  min-height: 100vh;
  background-image: radial-gradient(
    circle farthest-corner at 7.2% 13.6%,
    rgba(37, 249, 245, 1) 0%,
    rgba(8, 70, 218, 1) 90%
  );
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cont-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.cont-main {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.cont-checkbox {
  width: 150px;
  height: 100px;
  border-radius: var(--border-radius);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  background: white;
  transition: transform var(--transition);
}

.cont-checkbox:first-of-type {
  margin-bottom: 0.75rem;
  margin-right: 0.75rem;
}

.cont-checkbox:active {
  transform: scale(0.9);
}

// Include more CSS styles for checkbox and radio buttons here

Answer 10

I created a demonstration titled "Angular - Use images like checkboxes and radios"

Check out the Stackblitz example here

https://i.sstatic.net/1QsLu.png

https://i.sstatic.net/w9BdM.png

Here's a snippet from the app.component.html file:

<div class="cont-bg">
  <h5 class="text-white">Checkbox</h5>
  <div class="cont-main">
    <div class="cont-checkbox" *ngFor="let car of cars; index as i">
      <input type="checkbox" [id]="'myCheckbox-' + i" />
      <label [for]="'myCheckbox-' + i">
        <img [src]="car.img" />
        <span class="cover-checkbox">
          <svg viewBox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="info">{{ car.name }}</div>
      </label>
    </div>
  </div>
  <h5 class="text-white">Radio</h5>
  <div class="cont-main">
    <div class="cont-checkbox" *ngFor="let car of cars; index as i">
      <input type="radio" name="myRadio" [id]="'myRadio-' + i" />
      <label [for]="'myRadio-' + i">
        <img [src]="car.img" />
        <span class="cover-checkbox">
          <svg viewBox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="info">{{ car.name }}</div>
      </label>
    </div>
  </div>
</div>

This is an excerpt from the app.component.scss file:

* {
  font-family: Lato;
  --transition: 0.15s;
  --border-radius: 0.5rem;
  --background: #ffc107;
  --box-shadow: #ffc107;
  // --box-shadow: #0082ff;
}

.cont-bg {
  min-height: 100vh;
  background-image: radial-gradient(
    circle farthest-corner at 7.2% 13.6%,
    rgba(37, 249, 245, 1) 0%,
    rgba(8, 70, 218, 1) 90%
  );
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cont-main {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.cont-checkbox {
  width: 150px;
  height: 100px;
  border-radius: var(--border-radius);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: transform var(--transition);
  background: white;
  margin-bottom: 0.75rem;
  margin-right: 0.75rem;
  &:active {
    transform: scale(0.9);
  }
  input {
    display: none;
    &:checked + label {
      opacity: 1;
      box-shadow: 0 0 0 3px var(--background);
      .cover-checkbox {
        opacity: 1;
        transform: scale(1);
        svg {
          stroke-dashoffset: 0;
        }
      }
      img {
        -webkit-filter: none; /* Safari 6.0 - 9.0 */
        filter: none;
      }
    }
  }
  label {
    cursor: pointer;
    border-radius: var(--border-radius);
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 0.6;
    img {
      width: 100%;
      height: 70%;
      object-fit: cover;
      clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
      -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
      filter: grayscale(100%);
    }
    .cover-checkbox {
      position: absolute;
      right: 5px;
      top: 3px;
      z-index: 1;
      width: 23px;
      height: 23px;
      border-radius: 50%;
      background: var(--box-shadow);
      border: 2px solid #fff;
      transition: transform var(--transition),
        opacity calc(var(--transition) * 1.2) linear;
      opacity: 0;
      transform: scale(0);
      svg {
        width: 13px;
        height: 11px;
        display: inline-block;
        vertical-align: top;
        fill: none;
        margin: 5px 0 0 3px;
        stroke: #fff;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 16px;
        transition: stroke-dashoffset 0.4s ease var(--transition);
        stroke-dashoffset: 16px;
      }
    }
    .info {
      text-align: center;
      margin-top: 0.2rem;
      font-weight: 600;
      font-size: 0.8rem;
    }
  }
}

The contents of the app.component.ts file include the following:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  cars = [
    {
      id: '1',
      name: 'Mazda MX-5 Miata',
      img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*',
    },
    {
      id: '2',
      name: 'Toyota Supra',
      img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*',
    },
    // Add more car objects here
  ];
}

Pure CSS Checkbox and Radio styles:

* {
  font-family: Lato;
  margin: 0;
  padding: 0;
  --transition: 0.15s;
  --border-radius: 0.5rem;
  --background: #ffc107;
  --box-shadow: #ffc107;
}

.cont-bg {
  min-height: 100vh;
  background-image: radial-gradient(
    circle farthest-corner at 7.2% 13.6%,
    rgba(37, 249, 245, 1) 0%,
    rgba(8, 70, 218, 1) 90%
  );
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cont-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.cont-main {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.cont-checkbox {
  width: 150px;
  height: 100px;
  border-radius: var(--border-radius);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  background: white;
  transition: transform var(--transition);
}

.cont-checkbox:first-of-type {
  margin-bottom: 0.75rem;
  margin-right: 0.75rem;
}

.cont-checkbox:active {
  transform: scale(0.9);
}

// Include more CSS styles for checkbox and radio buttons here

Answer 11

Answer №6

It has come to my attention that some answers do not utilize the <label> element (why is that?), or they require the use of matching for and id attributes. This can cause issues if there are conflicting IDs in your code, forcing you to create unique IDs each time.

Additionally, if you hide an input element using display:none or visibility:hidden, the browser will not focus on it.

A nice way to structure a checkbox and its associated text (or image) is to enclose them within a label:

.fancy-checkbox-label > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: inherit;
}
.fancy-checkbox-label {
  font-weight: normal;
  cursor: pointer;
}
.fancy-checkbox:before {
  font-family: FontAwesome;
  content: "\f00c";
  background: #fff;
  color: transparent;
  border: 3px solid #ddd;
  border-radius: 3px;
  z-index: 1;
}
.fancy-checkbox-label:hover > .fancy-checkbox:before,
input:focus + .fancy-checkbox:before {
  border-color: #bdbdff;
}
.fancy-checkbox-label:hover > input:not(:checked) + .fancy-checkbox:before {
  color: #eee;
}
input:checked + .fancy-checkbox:before {
  color: #fff;
  background: #bdbdff;
  border-color: #bdbdff;
}
.fancy-checkbox-img:before {
  position: absolute;
  margin: 3px;
  line-height: normal;
}
input:checked + .fancy-checkbox-img + img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #bdbdff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<p>
  <label class="fancy-checkbox-label">
    <input type="checkbox">
    <span class="fancy-checkbox"></span>
    A normal checkbox
  </label>
</p>
<p>
  <label class="fancy-checkbox-label">
    <input type="checkbox">
    <span class="fancy-checkbox fancy-checkbox-img"></span>
    <img src="https://picsum.photos/seed/1/100">
  </label>
</p>

Answer 12

It has come to my attention that some answers do not utilize the <label> element (why is that?), or they require the use of matching for and id attributes. This can cause issues if there are conflicting IDs in your code, forcing you to create unique IDs each time.

Additionally, if you hide an input element using display:none or visibility:hidden, the browser will not focus on it.

A nice way to structure a checkbox and its associated text (or image) is to enclose them within a label:

.fancy-checkbox-label > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: inherit;
}
.fancy-checkbox-label {
  font-weight: normal;
  cursor: pointer;
}
.fancy-checkbox:before {
  font-family: FontAwesome;
  content: "\f00c";
  background: #fff;
  color: transparent;
  border: 3px solid #ddd;
  border-radius: 3px;
  z-index: 1;
}
.fancy-checkbox-label:hover > .fancy-checkbox:before,
input:focus + .fancy-checkbox:before {
  border-color: #bdbdff;
}
.fancy-checkbox-label:hover > input:not(:checked) + .fancy-checkbox:before {
  color: #eee;
}
input:checked + .fancy-checkbox:before {
  color: #fff;
  background: #bdbdff;
  border-color: #bdbdff;
}
.fancy-checkbox-img:before {
  position: absolute;
  margin: 3px;
  line-height: normal;
}
input:checked + .fancy-checkbox-img + img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #bdbdff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<p>
  <label class="fancy-checkbox-label">
    <input type="checkbox">
    <span class="fancy-checkbox"></span>
    A normal checkbox
  </label>
</p>
<p>
  <label class="fancy-checkbox-label">
    <input type="checkbox">
    <span class="fancy-checkbox fancy-checkbox-img"></span>
    <img src="https://picsum.photos/seed/1/100">
  </label>
</p>

Answer 13

Answer №7

Below is a simple demonstration of how to select an image like a checkbox

Example modified using Knockout.js:

var imageModel = function() {
    this.chk = ko.observableArray();
};
ko.applyBindings(new imageModel());

    input[type=checkbox] {
        display:none;
      }
 
  input[type=checkbox] + label
   {
       display:inline-block;
        width:150px;
        height:150px;
        background:#FBDFDA;
        border:none;
   }
   
   input[type=checkbox]:checked + label
    {
        background:#CFCFCF;
        border:none;
        position:relative;
        width:100px;
        height:100px;
        padding: 20px;
    }

   input[type=checkbox]:checked + label:after
    {
        content: '\2713';
        position:absolute;
        top:-10px;
        right:-10px;
        border-radius: 10px;
        width: 25px;
        height: 25px;
        border-color: white;
        background-color: blue;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<input type='checkbox' name='image1' value='image1' id="image1" data-bind="checked: chk"/><label for="image1"></label><label for="image1"><img class='testbtn'/></label>

<div data-bind="html: chk"></div>

Answer 14

Below is a simple demonstration of how to select an image like a checkbox

Example modified using Knockout.js:

var imageModel = function() {
    this.chk = ko.observableArray();
};
ko.applyBindings(new imageModel());

    input[type=checkbox] {
        display:none;
      }
 
  input[type=checkbox] + label
   {
       display:inline-block;
        width:150px;
        height:150px;
        background:#FBDFDA;
        border:none;
   }
   
   input[type=checkbox]:checked + label
    {
        background:#CFCFCF;
        border:none;
        position:relative;
        width:100px;
        height:100px;
        padding: 20px;
    }

   input[type=checkbox]:checked + label:after
    {
        content: '\2713';
        position:absolute;
        top:-10px;
        right:-10px;
        border-radius: 10px;
        width: 25px;
        height: 25px;
        border-color: white;
        background-color: blue;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<input type='checkbox' name='image1' value='image1' id="image1" data-bind="checked: chk"/><label for="image1"></label><label for="image1"><img class='testbtn'/></label>

<div data-bind="html: chk"></div>

Answer 15

Answer №8

If you are a WordPress user and utilize GravityForms to create your forms, this is an expansion on the provided solution for automatically filling checkbox fields with a list of posts and their corresponding Featured Thumbnails.

// Update '2' with your form ID
add_filter( 'gform_pre_render_2', 'populate_checkbox' );
add_filter( 'gform_pre_validation_2', 'populate_checkbox' );
add_filter( 'gform_pre_submission_filter_2', 'populate_checkbox' );
add_filter( 'gform_admin_pre_render_2', 'populate_checkbox' );

function populate_checkbox( $form ) {

    foreach( $form['fields'] as &$field )  {

        // Update '41' with your checkbox field ID
        $field_id = 41;
        if ( $field->id != $field_id ) {
            continue;
        }

        // Modify $args based on your post type
        $args = array(
                'post_type' => 'pet',
                'post_status' => 'publish',
                'posts_per_page' => -1,
                'tax_query' => array(
                        array(
                                'taxonomy' => 'pet_category',
                                'field' => 'slug',
                                'terms' => 'cat'
                        )
                )
        );

        $posts = get_posts( $args );

        $input_id = 1;

        foreach( $posts as $post ) {

            $feat_image_url = wp_get_attachment_image( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
            $feat_image_url .= '<br />' . $post->post_title;

            if ( $input_id % 10 == 0 ) {
                $input_id++;
            }

            $choices[] = array( 'text' => $feat_image_url, 'value' => $post->post_title );
            $inputs[] = array( 'label' => $post->post_title, 'id' => "{$field_id}.{$input_id}" );

            $input_id++;
        }

        $field->choices = $choices;
        $field->inputs = $inputs;

    }

    return $form;
}

Here is the corresponding CSS:

.gform_wrapper .gfield_checkbox li[class^="gchoice_2_41_"] {
    display: inline-block;
}

.gform_wrapper .gfield_checkbox li input[type="checkbox"][id^="choice_2_41_"] {
    display: none;
}


.gform_wrapper .gfield_checkbox li label[id^="label_2_41_"] {
    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[id^="label_2_41_"]:before {
    font-family: "font-icons";
    font-size: 32px;
    color: #1abc9c;
    content: " ";
    display: block;
    background-color: transparent;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
}

label[id^="label_2_41_"] img {
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
}

:checked + label[id^="label_2_41_"] {
    border-color: #ddd;
}

/* FontAwesome tick */
:checked + label[id^="label_2_41_"]:before {
    content: "\e6c8";
    background-color: transparent;
    transform: scale(1);
}

:checked + label[id^="label_2_41_"] img {
    transform: scale(0.9);
    box-shadow: 0 0 5px #333;
    z-index: 0;
}

Answer 16

If you are a WordPress user and utilize GravityForms to create your forms, this is an expansion on the provided solution for automatically filling checkbox fields with a list of posts and their corresponding Featured Thumbnails.

// Update '2' with your form ID
add_filter( 'gform_pre_render_2', 'populate_checkbox' );
add_filter( 'gform_pre_validation_2', 'populate_checkbox' );
add_filter( 'gform_pre_submission_filter_2', 'populate_checkbox' );
add_filter( 'gform_admin_pre_render_2', 'populate_checkbox' );

function populate_checkbox( $form ) {

    foreach( $form['fields'] as &$field )  {

        // Update '41' with your checkbox field ID
        $field_id = 41;
        if ( $field->id != $field_id ) {
            continue;
        }

        // Modify $args based on your post type
        $args = array(
                'post_type' => 'pet',
                'post_status' => 'publish',
                'posts_per_page' => -1,
                'tax_query' => array(
                        array(
                                'taxonomy' => 'pet_category',
                                'field' => 'slug',
                                'terms' => 'cat'
                        )
                )
        );

        $posts = get_posts( $args );

        $input_id = 1;

        foreach( $posts as $post ) {

            $feat_image_url = wp_get_attachment_image( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
            $feat_image_url .= '<br />' . $post->post_title;

            if ( $input_id % 10 == 0 ) {
                $input_id++;
            }

            $choices[] = array( 'text' => $feat_image_url, 'value' => $post->post_title );
            $inputs[] = array( 'label' => $post->post_title, 'id' => "{$field_id}.{$input_id}" );

            $input_id++;
        }

        $field->choices = $choices;
        $field->inputs = $inputs;

    }

    return $form;
}

Here is the corresponding CSS:

.gform_wrapper .gfield_checkbox li[class^="gchoice_2_41_"] {
    display: inline-block;
}

.gform_wrapper .gfield_checkbox li input[type="checkbox"][id^="choice_2_41_"] {
    display: none;
}


.gform_wrapper .gfield_checkbox li label[id^="label_2_41_"] {
    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[id^="label_2_41_"]:before {
    font-family: "font-icons";
    font-size: 32px;
    color: #1abc9c;
    content: " ";
    display: block;
    background-color: transparent;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
}

label[id^="label_2_41_"] img {
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
}

:checked + label[id^="label_2_41_"] {
    border-color: #ddd;
}

/* FontAwesome tick */
:checked + label[id^="label_2_41_"]:before {
    content: "\e6c8";
    background-color: transparent;
    transform: scale(1);
}

:checked + label[id^="label_2_41_"] img {
    transform: scale(0.9);
    box-shadow: 0 0 5px #333;
    z-index: 0;
}

Incorporate visual elements such as images that resemble checkboxes

Answer №1

A Creative Approach Using Pure HTML and CSS

Follow These Steps:

Edit:

Answer №2

Using Pure CSS Method

Answer №3

Straightforward Solution:

Enhanced Functionality:

Try the imgCheckbox jQuery Plugin:

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Attempting to showcase information on the Angular frontend

Utilizing Ajax for populating a cascading selection menu

What is the process for choosing a table column by clicking on the "select" option?

Sorry, we couldn't find the page you were looking for. The request method used was GET and the request URL was http://127.0.0.1:

The dynamic rendering of datasets is not supported in Material UI's <TableCell> component

Center alignment of text and images within the button's image

How to Utilize Output() and EventEmitter() for Value Transmission in Angular Application

Adding associated documents into MongoDB from an Express application

Square-shaped arch chart utilizing Highcharts library

Populate Input Field Based on Dropdown Selection

Inquiry about how TypeScript handles object property references when passed into functions

Is there a way to incorporate the use of quotation marks within the ng-bind directive in AngularJS?

Tips for preserving the contents of a list with HTML and Javascript

Assistance needed with incorporating an additional link button into the extensive menu

Set up Node.js application to allow CORS for designated endpoint(s) exclusively

`Connected circles forming a series in d3`

Jquery validation is ineffective when it fails to validate

Is there a way to incorporate a cancel option within my jqgrid interface?

Is it detrimental to my search engine ranking if I utilize CSS display:none?

The error message "TypeError: defineCall is not a function. require() fails" indicates that