Change Size Of Radio Buttons

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

Solution 1:

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.

Solution 2:

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/