Replace HTML checkbox by images

by Imabot

HTML

<label class="container">
  	<input type="checkbox" checked>
  	<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>

<label class="container">
  	<input type="checkbox" checked>
  	<img class="img-unchecked"  src="https://friconix.com/png/fi-cwlrxt-none.png" width="20px">
	<img class="img-checked"    src="https://friconix.com/png/fi-cwsuxt-check.png"   width="20px">
	Rounded checkbox
</label>

<label class="container">
  	<input type="checkbox" checked>
  	<img class="img-unchecked"  src="https://friconix.com/png/fi-xwluxt-square-checkbox-wide.png" width="20px">
	<img class="img-checked"    src="https://friconix.com/png/fi-xwluxt-square-checkbox-checked-wide.png"   width="20px">
	Square checkbox
</label>

<label class="container">
  	<input type="checkbox" checked>
  	<img class="img-unchecked"  src="https://friconix.com/png/fi-xtluxt-square-checkbox-thin.png" width="20px">
	<img class="img-checked"    src="https://friconix.com/png/fi-xtluxt-square-checkbox-checked-thin.png"   width="20px">
	Thin square checkbox
</label>

<label class="container">
  	<input type="checkbox" checked>
  	<img class="img-unchecked"  src="https://friconix.com/png/fi-swllxt-none.png" width="20px">
	<img class="img-checked"    src="https://friconix.com/png/fi-swluxt-smiley-happy-wide.png"   width="20px">
	Smiley checkbox
</label>

<label class="container" style="font-size:40px">
  	<input type="checkbox" checked>
  	<img class="img-unchecked"  src="https://friconix.com/png/fi-swllxt-none.png" width="40px">
	<img class="img-checked"    src="https://friconix.com/png/fi-swluxt-smiley-sad-wide.png"   width="40px">
	Big sad smiley checkbox
</label>

CSS

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

img { padding-right: 5px;}


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

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

/*  Display the checked image when checked */
.container input:checked ~ .img-checked {
	display: inline;
}

/*  Hide the unchecked image when checked */
.container input:checked ~ .img-unchecked {
	display: none;
}