Make clickable circles for radio inputs

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"> &lt;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!

MefAldemisov · Accepted Answer · 2020-06-30T15:00:35.023

0

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>
        &lt;3 plants (vegan or vegetarian)
        </div>
    </label>
</div>

edited Jun 30 '20 at 15:00

answered Jun 30 '20 at 12:36

MefAldemisov

867
10
21

Ah yes, this is what I had originally done.. but I can't then style the div when the input is checked, which is what happens currently. I made it a sibling so I could select it with CSS. Unless there's some JavaScript that will style a parent div? – Ben Wilde Jun 30 '20 at 14:42
[Here](https://stackoverflow.com/questions/842336/is-there-a-way-to-select-sibling-nodes) is the discussion, about the way to select siblings, using js. Also, I've edited the answer (now selection works). – MefAldemisov Jun 30 '20 at 15:04

Make clickable circles for radio inputs

1 Answers1