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

Solution 1:

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+.

Solution 2:

Old question but now there is a simple solution, compatible with most browsers, which is to use CSS3. I tested in IE, Firefox and Chrome and it works.

input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

Change the value 1.5, in this case an increment of 50% in size, according to your needs. If the ratio is very high, it can blur the radio button. The next image shows a ratio of 1.5.

Solution 3:

You can control radio button's size with css style:

style="height:35px; width:35px;"

This directly controls the radio button size.

<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">