Replace HTML checkbox by images

by Imabot

HTML

<label class="container">
  	<input type="checkbox">
  	<img class="img-unchecked"  src="https://friconix.com/png/fi-ctlrxt-none.png" >
	<img class="img-hover"  	src="https://friconix.com/png/fi-cwlrxt-none.png" >
	<img class="img-checked"    src="https://friconix.com/png/fi-cwluxt-smiley-happy-wide.png" >
	Text of the checkbox
</label>

CSS

.container {
	font-size: 24px;
	cursor: pointer;
  	caret-color: transparent;
	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;
}
.img-hover {
	display: none;
}


.container input:checked ~ .img-checked {
	display: inline;
}


.container input:checked ~ .img-unchecked {
	display: none;
}

.container:hover input:not(:checked) ~ .img-hover {
	display: inline;
}

.container:hover input:not(:checked) ~ .img-checked {
	display: none;
}

.container:hover input:not(:checked) ~ .img-unchecked {
	display: none;
}