Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the color of the 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. Radio buttons allow users to select one option from multiple available choices, and customizing their appearance helps maintain design consistency across your website.
Syntax
/* Using accent-color property */
input[type="radio"] {
accent-color: color;
}
/* Using hue-rotate filter */
input[type="radio"] {
filter: hue-rotate(angle);
}
Method 1: Using accent-color Property
The accent-color property is the modern and most straightforward way to change radio button colors. This property specifically targets UI controls like radio buttons and checkboxes
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.radio-group {
margin: 10px 0;
}
input[type="radio"] {
accent-color: #4CAF50;
margin-right: 8px;
transform: scale(1.2);
}
label {
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Custom Radio Button Colors</h3>
<div class="radio-group">
<input type="radio" id="option1" name="choice" value="option1">
<label for="option1">Option 1 (Green)</label>
</div>
<div class="radio-group">
<input type="radio" id="option2" name="choice" value="option2">
<label for="option2">Option 2 (Green)</label>
</div>
</body>
</html>
Two radio buttons with green accent color appear, larger than default size, with proper spacing and labels.
Method 2: Using hue-rotate() Filter
The hue-rotate() filter rotates the hue of elements on the color wheel. Since default radio buttons are blue (210° hue), rotating by 270° changes them to green (120° hue)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.filter-radio {
filter: hue-rotate(270deg);
margin-right: 8px;
transform: scale(1.2);
}
.radio-group {
margin: 15px 0;
}
label {
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Radio Buttons with Hue Filter</h3>
<div class="radio-group">
<input type="radio" class="filter-radio" id="choice1" name="selection" value="choice1">
<label for="choice1">Choice 1 (Filtered)</label>
</div>
<div class="radio-group">
<input type="radio" class="filter-radio" id="choice2" name="selection" value="choice2">
<label for="choice2">Choice 2 (Filtered)</label>
</div>
</body>
</html>
Radio buttons with green color achieved through hue rotation filter, displaying the same visual result as the accent-color method.
Browser Support
| Method | Browser Support | Best Use Case |
|---|---|---|
accent-color |
Modern browsers (Chrome 93+, Firefox 92+) | Preferred method for new projects |
hue-rotate() |
Wider browser support | Fallback for older browsers |
Conclusion
Both accent-color and hue-rotate() methods effectively change radio button colors. The accent-color property is the modern standard, while hue-rotate() provides broader browser compatibility for legacy support.
28K+ Views
