Can the size of a radio button be changed in CSS--in all browsers that is? I cannot figure out how this can be done. If you know this is not possible, please let me know so I don't waste my time. I have not looked into CSS 3 for HTML 5 yet. Hmmmm...
2 Answers
Although radio buttons look is controlled by operating system there is some method for applying style for form elements like radio buttons: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ AFAIK it is not recommended to modify it.

- 687
- 5
- 10
-
1@mr. mac guyver IE6 isn't a class A browser. – Greg Guida Jul 27 '11 at 00:07
-
You may do it that way: use jquery for changing radio into links, than style them into fake radio and add click function that sets a var. – Marcin Zaluski Jul 27 '11 at 00:15
CSS allows for some manipulation of the form element - so you should be able to set it's height and width as with any element. However the OS and Browser still have an impact on the final output.
The code in this demo demonstrates CSS rules and how they are used to style the radio buttons: http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/
The easiest way to avoid using CSS - which is actually the more difficult way to accomplish this change - is to use javascript and css to replace the radio buttons and other form elements with custom images : http://www.emblematiq.com/lab/niceforms/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

- 407
- 2
- 9
-
I read that too, but I can't get #el08 to show a large button. The width/height of the control look larger, but not the button. – JustBeingHelpful Jul 27 '11 at 00:00
-
-
1It's really the easiest - I use jQuery to simplify http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/ – Garrett Smallwood Jul 27 '11 at 00:11
-
uuu I like this one.. http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/demo.html – JustBeingHelpful Jul 27 '11 at 00:16