Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 861
Only Bolivian Here Avatar asked Oct 11 '11 14:10

Only Bolivian Here


People also ask

How do I resize a radio button in HTML?

You cannot change the size of the radio button. Typically people will design a custom UI element to replace the UI aspect of the checkbox/radiobutton. Clicking it results in a click on the underlying checkbox/radio button.

Can you make radio buttons bigger?

Bigger Radio Buttons can be achieved by injecting the neccesary CSS code to your form. Example Form: http://form.jotformpro.com/form/40718865480967? All you need to do is customize the value 50px to a higer or lower value you wish to use.

How do you increase the clickable area of a button?

The correct way to do this is to add the padding on the link itself. Notice that the top and bottom padding won't work by default since it's an inline element. It can be block or inline-element or flex , whatever works for your case.


2 Answers

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>.

like image 99
Wesley Murch Avatar answered Sep 29 '22 12:09

Wesley Murch


use Bootstrap, to create buttons around radiobuttons:

<label class="btn btn-lg btn-default">  
<input type="radio"> Something 
</label>
like image 28
Andrew Rebane Avatar answered Sep 29 '22 12:09

Andrew Rebane