Changing Color of Radio Buttons with CSS accent-color

css
Published on November 13, 2021

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 :

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 the work it has to perform. 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 :
input[name="gender-2"] {
	accent-color: yellow;
}

Browser Compatibility

Latest versions of Firefox, Chrome & Edge have support for accent-color. There is no support for this in Safari yet.

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.

In this Tutorial
    Comments
    Loading Comments