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

Tools:

Crypto Currency

PHPKIDA provides free online the best real-time crypto market price, news, predictions, index with graphs & historical data for 2000+ coins including bitcoin, ethereum, & altcoins from major cryptocurrency exchanges.

Visite Tool

Icon Generator

PHPKIDA provides free online icon generator. Our icon generator help you to edit, modify, resize and customize icon for your website and applications. Convert to a shap you like add icon border, you can change icon border color, border size, background color, icon shadow, icons color, icon size in your own way and save it as a png image.

Visite Tool

Youtube Video Downloader

PHPKIDA provides Free online YouTube video downloader to download YouTube videos quickly in MP4, 3GP, and more. Search your video and free fast download youtube videos.

Visite Tool

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.