How to change the color of the radio button using CSS?

CSS Web Development Front End Technology

Radio button is a common form element. It allows users to select a single option from a group of options. It is often used in conjunction with a group of labels, each associated with a corresponding radio button. In this article, we will look at how to change the color of radio buttons using CSS.

What is Radio Button?

A radio button is a small round button on a webpage or application that lets users pick one option from a group of choices. It is also known as an "option button,". It is often used in forms, surveys, and quizzes, where only one option can be selected at a time.

Change the color of radio buttons using CSS

Customizing the appearance of radio buttons is a common task for web developers and designers. One aspect that can be modified is the color of the radio buttons. This can be done by using the CSS attribute selector, which allows users to select elements based on their attributes. For example, to select all radio buttons, we can use the following CSS code −

input[type="radio"] {
   /* CSS styles go here */
}

After selecting the radio buttons, we use CSS to change their color. This can be done by using the color property. For example, to change the color of all radio buttons to green, we can use the following CSS code −

input[type="radio"] {
   color: green;
}

Example

This is an example to change the color of the radio button.

<html> 
   <title>Welcome to Tutorialspoint</title>
   <head>
      <style>
         body{
            text-align:center;
         }
         input[type=radio] {
            accent-color: green;
         }
      </style>
   </head>
   <body>
      <h3>Change the color of radio buttons using CSS </h3>
      <input type="radio" id="RadioButton" name="RadioButton" value="RadioButton">
      <label for="RadioButton">Radio Button</label>
   </body>
</html>

As well, we can change the color of radio buttons by using the background-color property. This can be useful if we want to change the color of the entire button, including the button itself and any space surrounding it. For example, to change the background color of all radio buttons to blue, we can use the following CSS code −

input[type="radio"] {
   background-color: blue; 
}

Example

This is one more example to change the color of the radio button.

<html>
   <style>
      body{
         text-align:center;
      }
      input[type=radio] {
         appearance: none;
         padding: 10px;
         background-color: yellow;
         border-radius:50%;
      }
      input[type=radio]:checked {
         background-color: blue;
      }
   </style>
   <body>
      <h3>Change the color of radio buttons using CSS </h3>
      <form>
         <input type="radio" id="RadioButton" name="Button" value="Button">
         <label for="RadioButton">Radio Button</label>
      </form>
   </body>
</html>

Conclusion

CSS allows for the easy customization of radio button colors. By selecting the radio buttons using the attribute selector and utilizing properties such as color and background-color. The use of pseudo-class also allows for the modification of radio button colors in specific states. With these techniques, radio buttons can be tailored to provide an optimal user experience.