Changing Color of Radio Buttons with CSS

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

#my-radio {
	accent-color: green;


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 also  Pure HTML5 / CSS Tooltip Solution

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.

See also  Pure CSS Material Morphing Menu

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.

Leave a Reply

Your email address will not be published. Required fields are marked *