How To Change The Color Of Radio Button Using CSS

In this article we are going to learn how we can change the color of radio button using CSS. No matter what kind of project you are working on, at some point you will find the requirement to change the color of radio button on your website or mobile apps to make your site look better.

Example:

Here is the CSS code for radio button.

input[type='radio']:after 
{
     width: 15px;
     height: 15px;
     border-radius: 15px;
     top: -2px;
     left: -1px;
     position: relative;
     background-color: #d1d3d1;
     content: '';
     display: inline-block;
     visibility: visible;
     border: 2px solid white;
}
input[type='radio']:checked:after 
{
     width: 15px;
     height: 15px;
     border-radius: 15px;
     top: -2px;
     left: -1px;
     position: relative;
     background-color: #ffa500;
     content: '';
     display: inline-block;
     visibility: visible;
     border: 2px solid white;
}

<input type='radio' name="gender"/> Male 
<input type='radio' name="gender"/> Female

That’s it.