How to automatically select radio button by clicking the padding around it?

Question

I read from this question: Can the label tags for attribute be associated with a normal div? that is not possible to give a div the attribute for to be associated to the id in the input. Normally if I give a for to label and id to input the radio button is automatically selected whenever the user clicks the text in the label.

Let's say I create a form with many radio buttons and each one of them are in a span or a div so I can dive a border that wraps both label and radio button, let's also say I give a 20px padding all directions, how can I make clickable the all area within the border so it autotomatically selects the radio button associated to the div?

I wrote this below but just found out div doesn't recognize for attribute:

HTML

<div class="radio-btn" for="rdBanana"><input type="radio" name="fruit" value="banana" id="rdBanana"><label>Banana</label></div>
<div class="radio-btn" for="rdOrange"><input type="radio" name="fruit" value="orange" id="rdOrange"><label>Orange</label></div>
<div class="radio-btn" for="rdKiwi"><input type="radio" name="fruit" value="kiwi" id="rdKiwi"><label>Kiwi</label></div>

CSS

.radio-btn {
display: inline-block;
border: 1px solid black;
padding: 20px;
}

How can i make all the padding clickable to automatically select radio button?

Havenard Havenard · Accepted Answer · 2016-12-04T15:53:11

Place the button inside the <label>.

Instead of <input type="radio"><label>Banana</label>, use <label><input type="radio">Banana</label>.

Everything inside <label> will become clickable and toggle the button.

How to automatically select radio button by clicking the padding around it?

1 Answers