Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Change the Color of Radio Button Using CSS
To change the color of the radio button using CSS, is a simple process that can be achieved using various approaches. In this article, we will learn and understand two different approach for changing the color of the radio button using CSS.
Radio buttons allows to select one option out of many available options. In this article, we are having a radio button and our task is to change the color of radio button using CSS.
Approaches to Change the Color of the Radio Button
Here is a list of approaches to change the color of the radio button using CSS which we will be discussing in this article with stepwise explaination and complete example codes.
Radio Button Color Using accent-color Property
In this approach to change the color of the radio button , we have used accent-color property which is used to specify color of UI elements like radio buttons, check boxes and many more.
- We have used "input[type="radio"] {}" CSS selector to select the radio button.
- In second step, we have used "accent-color: green;" property, which change the color of radio button to green.
Example
Here is a complete example code implementing above mentioned steps to change the color of the radio button.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Changing color of the radio button using CSS
</title>
<style>
body {
text-align: center;
}
input[type="radio"] {
accent-color: green;
}
</style>
</head>
<body>
<h3>
Change the color of radio buttons using CSS
</h3>
<p>
In this example we have used accent-color
property to Change the color of radio button
using CSS.
</p>
<input type="radio" id="RadioButton"
name="RadioButton" value="RadioButton">
<label for="RadioButton">Radio Button</label>
</body>
</html>
Radio Button Color Using hue-rotate() Filter
To change the color of the radio button using CSS, we have used hue-rotate() filter which applies a filter to set the hue rotation by changing the degree specified in parameter according to the color which you want.
- We have used "input[type="radio"] {}" CSS selector to select the radio button.
- In the second step, we have used "filter: hue-rotate(270deg);" filter, which changes the color of radio button to green.
- Since default color of radio button is blue (hue angle of 210deg) and green have hue angle of 120deg , we can use -90deg or 270deg to change it's color to green.
Example
Here is a complete example code implementing above mentioned steps to change the color of the radio button.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Changing color of the radio button using CSS
</title>
<style>
body {
text-align: center;
}
input[type="radio"] {
filter: hue-rotate(270deg);
}
</style>
</head>
<body>
<h3>
Change the color of radio buttons using CSS
</h3>
<p>
In this example we have used hue-rotate()
filter to Change the color of radio button
using CSS.
</p>
<input type="radio" id="RadioButton"
name="RadioButton" value="RadioButton">
<label for="RadioButton">Radio Button</label>
</body>
</html>
Conclusion
In this article, we have understood how to change the color of the radio button using CSS. we have discussed two different approaches for changing the color of the radio button which are: by using accent-color property and by using hue-rotate() filter. We can use any of the above two approaches.
28K+ Views
