Something like this:
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.
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.
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.
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.
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>
.
use Bootstrap, to create buttons around radiobuttons:
<label class="btn btn-lg btn-default">
<input type="radio"> Something
</label>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With