Menu
I want to change size of a radio button control using only HTML and/or CSS.
Is it possible to do without using images?
229
Setting the border to 0 seems to allow the user to change the size of the button and have the browser render it in that size for eg. the above height: 2em will render the button at twice the line height. This also works for checkboxes ( input[type=checkbox] ). Some browsers render better than others.
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.
Well you can wrap it in Transform. Scale then use the scale property to increase it.
One quick solution to resizing the radio button is to transform it:
input[type='radio'] {
transform: scale(2);
}
This results in all radio buttons being twice as large. As always, check browser support.
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.
See an example here: http://webdesign.maratz.com...radio-buttons/jquery.html
189
Not really, not in a cross-browser manner. In Firefox, Safari, and Chrome, you can remove the default radio-button styling by setting appearance:none; (with vendor prefixes), then you can style it as you like. But IE and Opera don't support this yet.
The only reliable way to achieve styled checkboxes is to use javascript to make a different element act like a checkbox. But, of course, then you're screwing people with javascript disabled. In the end, the problem is sticky enough that I tend to leave checkboxes unstyled except for positioning.
26
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
