CSS Invisible radio button but highlight wrapping div - css

Question

The following HTML is being generates radio_buttons as selectors from an image label
<div class='small-2 columns buttonselector'>
<label for="content_ki_id_1">
<input class="invisi-selector" type="radio" value="1" name="content[ki_id]" id="content_ki_id_1" />
<img src="/assets/circle.svg" />
<div></div>
</label>
</div>
The CSS properly makes the radio button invisible, but there is a gap in handling the wrapper and its visibility on radio_button selected
.buttonselector > div {
width: 100%;
height: 100%;
background: #fff;
}
.invisi-selector {
opacity: 0;
}
.invisi-selector:checked + div {
border-color: #ba53ad;
border-width: 4px;
}
the wrapper cannot logically take the selector's class for it would be invisible. How can the checked action be binded to the wrapping div?

Answer 1

It can't, but you can use absolute positioning to make it look like it is.
.buttonselector>label {
width: 100%;
height: 100%;
background: #fff;
display: block;
position: relative;
}
.invisi-selector {
opacity: 0;
position: absolute;
}
.invisi-selector~div {
z-index: -1;
position: absolute;
left: -4px;
top: -4px;
width: 100%;
height: 100%;
}
.invisi-selector:checked~div {
border: 4px solid #ba53ad;
}
<div class='small-2 columns buttonselector'>
<label for="content_ki_id_1">
<input class="invisi-selector" type="radio" value="1" name="content[ki_id]" id="content_ki_id_1" />
<img src="/assets/circle.svg" />
<div></div>
</label>
</div>