Use images as checkboxes

web-development

responsive-design

css

performance

byNikita Barsukov·Sep 30, 2024

Hidden checkboxes are key. Gain control with CSS by associating labels to these hidden gems. Disappear checkboxes using display: none, then employ :checked to switch up the images upon selection.

<!-- Pretend to ☹️ "hide" the checkbox using CSS tricks -->
<input type="checkbox" id="imgCheck" class="hidden" />
<label for="imgCheck" class="imgLabel">
  <!-- The 🕵️‍♂️ "off" image state -->
  <img src="off.jpg" alt="Off" class="off" />
  <!-- The 💡 "on" image state, stealthy ninja style -->
  <img src="on.jpg" alt="On" class="on" style="display:none;" />
</label>
<!-- Oh no! Our checkbox has gone 'incognito' 😎 -->
<style>
  .hidden { display: none; }
  /* Play a reveal magic trick 🎩✨ for the "on" state when checked */
  #imgCheck:checked + .imgLabel .off { display: none; }
  #imgCheck:checked + .imgLabel .on { display: block; }
</style>

Work magic 🧙‍♀️ with CSS sprites and transitions. For a personalized touch minus JavaScript, tap into the magic of ::before.

Cast spells with CSS

More than hiding and revealing, checkboxes should weave into your website's fabric 🧶. Bring them to life with the ::before pseudoelement.

/* Dressing up the label in a flashy costume 🎩*/
label.imgLabel {
  position: relative;
  cursor: pointer;
  width: 200px; /* Image width */
  height: 200px; /* Image height */
  border: 2px solid transparent; /* Invisible now, but wait... */
}
/* Magic wand's tick mark appears! ✨🪄 */
label.imgLabel::before {
  content: url('tick.png');
  position: absolute;
  top: 10px;
  right: 10px;
  display: none; /* Starting off shy 😳 */
  transition: all 0.2s ease; /* Ensures a smooth tick appearance */
}
#imgCheck:checked + label.imgLabel::before {
  display: block;  /* Stepping into the spotlight 🎭 */
}

Conquer checkbox-image synchronization

Beyond basic toggling is a web of complex interactions. Use CSS to tame the beast 👹 with transitions and visual clues.

/* When hovering, woo users with a surprise border! 😲 */
label.imgLabel:hover,
label.imgLabel:focus-within {
  border-color: #blue;
}

input[type="checkbox"]:checked + label.imgLabel {
  transform: scale(0.9); /* When selected, it shrinks as if scared 😁 */
}

input[type="checkbox"]:not(:checked) + label.imgLabel:hover::before {
  opacity: 0.5; /* Preview a timid tick for unchecked box */
}

Accessibility, our noble knight 🛡️.

Preach for attribute links and steer clear of hiding interactive elements. Screen readers will remember this generous act.

<!-- Each "id" is a unique snowflake ❄️-->
<input type="checkbox" id="imgCheck1" class="hidden"/>
<label for="imgCheck1">...</label>

<!-- Repeat for every checkbox item, giving them their own identity -->

/* Trick screen readers by playing hide-n-seek 😜 */
.hidden {
  position: absolute;
  left: -9999px;
}

jQuery and more tricks up the sleeve

For jQuery lovers, the imgCheckbox plugin simplifies life. To further impress, go for Font Awesome's treasury of icons. Choose CSS over JavaScript for optimum performance unless advanced actions are desired.

Box of interactive imagery

Wrap images in a div for checkbox-like interaction. Allow users to tap anywhere on the image for flipping the switch.

<div class="checkbox-image">
  <input type="checkbox" id="imgCheck2" class="hidden"/>
  <label for="imgCheck2" class="imgLabel">
    <!-- Pretty image ensues -->
  </label>
</div>

Optimize for the people

Employ CSS hover and focus styles to enhance the interactive experience. It will guide users with visual signals and provide immediate feedback.

/* Add a celebratory confetti 🎊 to the focus/hover */
.checkbox-image:hover label.imgLabel,
.checkbox-image:focus-within label.imgLabel {
  outline: 2px dashed #00f;
}