Changing Color of Radio Buttons with CSS accent-color

The new CSS accent-color property has made it very easy to change theme colors of radio buttons.

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

Demo

Select Gender :

Male

Female

HTML & CSS :

<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: green;
}

Guaranteeing Legibility in Case of Low Contrast Colors

Sometimes the provided color may be too light relative to the background and this would hamper legibility. The radio button must maintain contrast because of its nature. In this case the browser may adjust the brightness of the color or substitute colors in other parts of the radio button.

See the below demo where a low contrast color has been provided as the accent-color.

Select Gender :

Male

Female

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

Browser Compatibility

Latest versions of Firefox, Chrome & Edge have support for accent-color. The latest version of Safari (14.1) has also added support for it.

Customizing the Entire Radio Button ?

The accent-color just changes the theme color of radio buttons — this is enough for most use cases.

However if you are looking to fully customize the radio button (changing border, padding, background etc) — the CSS appearance property can be used to do so. See Custom Radio Buttons with CSS appearance Property for more.