Issue
I was able to create the code for it, but the checkbox doesn’t appear above the image. It’s slightly displaced, how do i fix it?
.custom-checkbox input {
display: none;
}
.custom-checkbox span {
border: 2px solid #7e8a94;
float: right;
height: 20px;
width: 20px;
border-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.custom-checkbox:hover span,
.custom-checkbox input:checked + span {
border: 3px solid #43D8B0;
}
.custom-checkbox input:checked + span:before {
content: "✔";
} <label class="custom-checkbox">
<img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
<input type="checkbox">
<span></span>
</label>I want the checkbox to appear on the top left side,
This way: http://prntscr.com/j960yk
Thanks for your time.
Solution
Added float: left; to your .custom-checkbox span CSS rule, added a br tag and modified your HTML a bit.
.custom-checkbox input {
display: none;
}
.custom-checkbox span {
border: 2px solid #7e8a94;
/* float: right; - you don't need that. Use float: left; */
float: left;
height: 20px;
width: 20px;
border-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.custom-checkbox:hover span,
.custom-checkbox input:checked+span {
border: 3px solid #43D8B0;
}
.custom-checkbox input:checked+span:before {
content: "✔";
}<label class="custom-checkbox">
<input type="checkbox">
<span></span>
<br>
<br>
<img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/>
</label>Answered By – CodeF0x
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0