How to increase size of radio button

If you want to increase size of radio button using css, Yes it is possible to increase the size of radio buttons using css. here i am writing some examples, they my be help you increase size of HTML radio button.

Example 1 – Increase the size of radio button by transform

input[type=radio]{ 
transform: scale(1.5); 
-moz-transform: scale(1.5); 
-ms-transform: scale(1.5); 
-webkit-transform: scale(1.5); 
-o-transform: scale(1.5); 
}

Example 1 – Increase the size of radio button by Height and Width

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

Example 1 – Increase the size of radio button by appearance:none

CSS CODE

#enlarged 
{
    width:40px;
    height:40px;
}

#super-enlarged {
    width:150px;
    height:150px;
}

#enlarged-transform {
    display:inline-block;
    -webkit-transform:scale(3);
    -moz-transform:scale(3);
    transform:scale(3);
}

#custom {
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    width:60px;
    height:60px;
    border:5px solid rgba(0,0,0,.4);
    background:firebrick;
    border-radius:50%;
    box-shadow:inset 0 0 50px rgba(0,0,0,.2);
}
#custom:checked {
    background:limegreen;                
}

HTML CODE

<input id="unstyled" type="radio" /><label for="unstyled">Unstyled radio button</label>
<br>
<input id="enlarged" type="radio" /><label for="enlarged">Enlarged radio button</label>
<br>
<input id="super-enlarged" type="radio" /><label for="super-enlarged">Really big radio button</label>
<br>
<input id="enlarged-transform" type="radio" /><label for="enlarged-transform">Enlarged radio button using CSS3 transform</label>
<br>
<input id="custom" type="radio" /><label for="custom">Custom radio button</label>