Issue
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:
Solution
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>Answered By – Ason
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0