How To Change Color Of Radio Buttons With CSS Accent-Color

In my previous article you can see how to change the color of radio button using CSS but now CSS has new accent-color property has made it very easy to change theme colors of radio buttons.

Syntax:

#my-radio {
    accent-color: green;
}

Example:

<input type="radio" name="gender" value="M" /><label>Male</label>
<input type="radio" name="gender" value="F" /><label>Female</label>

input[name="gender"]
{
    accent-color: #555555;
}

Output:

Example:

input[name="gender"] {
  accent-color: Green;
}

Select Gender :
<input type="radio" name="gender" value="M" /><label>Male</label>
<input type="radio" name="gender" value="F" /><label>Female</label>

Output

That’s it.