While working on custom checkboxes, I came across a unique situation - the only way the positioning of the checkboxes aligns properly is if the classes '.init' and '.hover' are assigned to images, and the class '.done' is displayed only when assigned to an Image tag.
Check out the JSX code below:
<div className={styles.container}>
<input className={styles.ckb} type="checkbox" name="vt" id="ckb"/>
<label htmlFor="ckb">
<img src="VT/vt-.svg" height={88} width={88} className={styles.init}/>
<img src="VT/vt.svg" height={88} width={88} className={styles.hover} />
<Image src="VT/vtD.svg" height={88} width={88} className={styles.done} />
<span className={styles.lab}>: VEGE :</span>
</label>
</div>
And here is the corresponding CSS:
.container {
display: block;
position: relative;
}
.init {
position: absolute;
top: 0; left: 0;
}
.hover {opacity: 0;
position: absolute;
top: 0; left: 0;
}
.done {opacity: 0;
position: absolute;
top: 0; left: 0;
}
input[type='checkbox'].ckb {
opacity: 1;
cursor: pointer;
position: absolute;
}
input[type='checkbox'].ckb:hover + label .hover {
opacity: 1;
display: inline;
}
input[type='checkbox'].ckb:checked + label .done {
opacity: 1;
display: inline;
}
This raises the question - why does this specific setup work in this way?