How to change the size of the radio button using CSS?

Question

Is there a way to control the size of the radio button in CSS ?

Answer 1

Yes, you should be able to set its height and width, as with any element. However, some browsers do not really take these properties into account.

This demo gives an overview of what is possible and how it is displayed in various browsers: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

As you'll see, styling radio buttons is not easy :-D

A workaround is to use JavaScript and CSS to replace the radio buttons and other form elements with custom images:

• https://github.com/emblematiq/Niceforms
• https://web.archive.org/web/20161119112447/http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/