Yagel Yagel - 1 month ago 8
CSS Question

How to make checkboxes with images

I have default checkboxes on my website, with only text on every checkbox(e.g. example).

Does it possible to design the checkboxes to have images on them? and maybe to put "v" mark on a checkbox if it been chosen?




I want it to look something like:
enter image description here

Answer

This is how you can simulate an image based checkbox using a label

input {
  display: none
}

/*  switch image  */
label[for="chk1"] {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  background: url(http://placehold.it/100/f00);
}
#chk1:checked ~ label[for="chk1"] {
  background: url(http://placehold.it/100/ff0);
}

/*  add content  */
label[for="chk2"] {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  position: relative;
}
#chk2:checked ~ label[for="chk2"]::after {
  content: 'V';
  position: absolute;
  left: 0;
  right: 0;
  font-size: 90px;
  font-weight: bold;
  font-family: arial;
}
<input id="chk1" type="checkbox">
<input id="chk2" type="checkbox">

<label for="chk1"></label>
<label for="chk2"></label>

<div>Click a box to toggle it</div>