Replace HTML checkbox by images

by Imabot

HTML

<label class="container">
  	<input type="checkbox">
  	<img class="img-unchecked"  src="https://lucidar.me/en/web-dev/files/unchecked.png" width="20px">
	<img class="img-checked"    src="https://lucidar.me/en/web-dev/files/checked.png"   width="20px">
	Text of the checkbox
</label>

CSS

.container {
	font-size: 24px;
	cursor: pointer;
    caret-color: transparent;
	display: block;
}


/* Hide the browser's default checkbox */
.container input {
  display: none;
}

/* Hide the checked checkbox */
.img-checked {
	display: none;
}


/* If checked, show the checked image */
.container input:checked ~ .img-checked {
	display: inline;
}

/* If checked, hide the unchecked image */
.container input:checked ~ .img-unchecked {
	display: none;
}