How to change the color of radio buttons using CSS ?

Last Updated : 24 Jan, 2024

Radio buttons in HTML are input elements that allow users to select a single option from a group of choices. To change the color of radio buttons using CSS, you can target the ‘ input [type=”radio”] ‘ selector and apply styles like ‘background-color’ and ‘border-color’. Adjust these styles to achieve the desired color changes for both the unchecked and checked states of the radio buttons.

Syntax:

accent-color : auto | color | initial | inherit;

Property values:

Property Value	Description
auto	The browser will automatically set the accent colour for the control elements.
color	Specifies the accent colour using RGB representation, hex representation, or a color name.
initial	Sets the accent-color property to its default value.
inherit	Inherits the accent-color property from its parent component.

Example 1: Implemeatation to change the color of radio buttons using CSS.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        #specifyColor {
            accent-color: red;
        }
    </style>
</head>
 
<body>
    <center>
        <h3> Red colored radio button </h3>
        <input type="radio"
               id="specifyColor"
               name="radio1"
               value="GFG">
        <label for="specifyColor">GFG</label>
    </center>
</body>
 
</html>

Output:

Example 2: Implementation with various kinds of accent-color properties by specifying the color in different forms like the name of color directly, using RGB color value, hex color code, etc. to change the color of radio buttons.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        To change the color of radio buttons using CSS
    </title>
    <style>
        input[type=radio]#Yellow {
            accent-color: pink;
        }
 
        input[type=radio]#Green {
            accent-color: rgb(0, 255, 0);
        }
 
        input[type=radio]#auto {
            accent-color: auto;
        }
 
        input[type=radio]#Red {
            accent-color: #FF0000;
        }
    </style>
</head>
 
<body>
    <h3> Radio button color change </h3>
    <input type="radio" id="Yellow" name="colors" value="Yellow">
    <label for="Yellow">Yellow</label><br>
    <input type="radio" id="Green" name="colors" value="Green">
    <label for="Green">Green using RGB</label><br>
    <input type="radio" id="auto" name="colors" value="auto">
    <label for="auto">auto-color set by browser</label><br>
    <input type="radio" id="Red" name="colors" value="Red">
    <label for="Red">Red color using hex representation
    </label><br>
</body>
 
</html>