Make clickable circles for radio inputs - html

Question

I'd appreciate some help with formatting these radio buttons:
.frm_radio div {
display:flex!important;
align-items: center!important;
justify-content: center!important;
width:100%!important;
height:400px!important;
background:white!important;
border-radius:50%!important;
border:3px black solid!important;;
}
.frm_radio label {
width:80%!important;
font-size:30px!important;
color:black!important;
line-height:1.2!important;
margin:auto!important;
}
.frm_radio input:checked + div {
background:#FFC5FF!important;
}
.frm_radio input {
display:none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frm_radio" id="frm_radio_15-0"> <input type="radio" name="item_meta[15]" id="field_2ycsr-0" value="0.65" data-frmval="1" data-invmsg="Watcha normally eat? is invalid"><div>
<label for="field_2ycsr-0"> <3 plants (vegan or vegetarian)</label></div></div>
The whole thing is wrapped up in a CSS-Grid that makes everything square (so they're circles instead of ovals). I've emulated that in this CSS just by adding a height.
My issue is that I want the entire circle to be clickable; now only the text is clickable. How should I lay this out to make it work that way?
Reason for all the !important tags: I'm using Formidable Forms plugin to make the form. I realise it's messy, but it works just fine for this!

Answer 1

To make the whole circle clickable, move <input> into <label> tag (in this case, you can also remove id and for attributes). So, the resulted solution should be:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frm_radio" id="frm_radio_15-0">
<label>
<input type="radio" name="item_meta[15]" value="0.65" data-frmval="1" data-invmsg="Watcha normally eat? is invalid">
<div>
<3 plants (vegan or vegetarian)
</div>
</label>
</div>