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>

Leave a Reply

Related Posts: You may like

Rotating Words with CSS Animations

Pure CSS Loader and spinners animation

Pure css drop down menu

Pure css dropdown navigation bar

PHPKIDA Offering Free Tools:

INSTA DOWNLOADER

Download Instagram Videos & Photos.

Download Now

CURRENCY CONVERTER

Real Time Currency Converter

Convert Now

ROBOST.TXT GEN.

Robots.txt File Creater

Create Now

HTML MINIFIER

Compress yout HTML Code

Minify Now

CSS MINIFIER

Compress yout CSS Code

Minify Now

JAVASCRIPT MINIFIER

Compress yout JavaScript Code

Minify Now

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.