How can I make an HTML radiobutton with a big target area?

Question

Something like this:

enter image description here

Where the user would click on any area of the button and it would select that radio button.

Any suggestions?

As far as I can tell, radio buttons as self closed, and can't wrap around other elements.

score 61 · Accepted Answer · edited Oct 11 '11 at 14:10

61

The best way is to just wrap the <input> in its <label>, as clicking a label also has the effect of focusing its associated input:

<label>
    <input name="transfer" type="radio">Bank Deposit
</label>

No javascript required: Demo: http://jsfiddle.net/GTGan/

If you need to style the label text separately, just wrap it in a <span>.

edited Oct 11 '11 at 14:10

zzzzBov

174,988
54
320
367

answered Oct 11 '11 at 14:08

Wesley Murch

101,186
37
194
228

2

The best part about this solution is that it's **accessible** – zzzzBov Oct 11 '11 at 14:09
3

...and as a bonus: you don't need an `id` for your input or a `for` for your label, it's implied. – Wesley Murch Oct 11 '11 at 14:11

score 3 · Answer 2 · edited Jul 06 '22 at 04:38

3

use Bootstrap, to create buttons around radiobuttons:

<label class="btn btn-lg btn-default">  
    <input type="radio"> Something 
</label>

edited Jul 06 '22 at 04:38

Penny Liu

15,447
5
79
98

answered Aug 25 '15 at 17:29

Andrew Rebane

199
3
12

score 2 · Answer 3 · answered Oct 11 '11 at 14:10

2

Have you tried using the LABEL tag? For accessibility sake we should be using label tags to associate labels to form controls all of the time. Not only does that help tie things together for screen readers, but it also makes the label as well as the control clickable.

You can read a bit more detail and find an example here: http://webaim.org/techniques/forms/screen_reader#labels

answered Oct 11 '11 at 14:10

ph33nyx

301
2
5

I see that Wesley Murch beat me to the punch and I missed it LOL – ph33nyx Oct 11 '11 at 14:15

score -1 · Answer 4 · answered Oct 11 '11 at 14:07

-1

You could use javascript for achieving this effect by giving it an onClick event, or you could just use jQuery in combination with some gui-plugins. I'd prefer this solution for cross-browser compatibility.

answered Oct 11 '11 at 14:07

chabuya

143
1
3
10

This could be easily accomplished with a html label. – brenjt Oct 11 '11 at 16:57
I didn't know the label solution was w3c conform, but it seems to be, so using labels is definitely better than using js. – chabuya Oct 11 '11 at 18:28

How can I make an HTML radiobutton with a big target area?

4 Answers4

Linked