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

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

How do I resize a radio button in CSS?

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.

How do I make my radio button bigger in HTML?

Radiobutton looks better with "transform" than using "width" and "height" and it's much simpler than the other solutions. It actually does not look that bad to me. I tested on IE 11, Chrome and FF and they looked fine. Thanks!

This css seems to do the trick:

input[type=radio] {     border: 0px;     width: 100%;     height: 2em; }

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.

From a windows box it works in IE8+, FF21+, Chrome29+.