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
Selected Reading
Custom Radio Buttons with CSS appearance Property
The CSS appearance property allows you to style form elements like radio buttons with custom designs instead of the default browser styling. By setting appearance: none, you can create completely customized radio buttons that match your website's design.
Syntax
input[type=radio] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
Example: Basic Custom Radio Button
The following example creates custom radio buttons with rounded corners and color changes on selection −
<!DOCTYPE html>
<html>
<head>
<style>
input[type=radio] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 20px;
height: 20px;
background-color: orange;
border-radius: 50%;
cursor: pointer;
border: 2px solid #ccc;
margin-right: 8px;
}
input[type=radio]:checked {
background-color: magenta;
border-color: magenta;
}
label {
display: flex;
align-items: center;
margin: 10px 0;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h2>Select Gender</h2>
<form>
<label>
<input type="radio" name="gender" value="male">
Male
</label>
<label>
<input type="radio" name="gender" value="female">
Female
</label>
</form>
</body>
</html>
Two custom radio buttons appear as orange circles. When clicked, the selected radio button changes to magenta color. Only one option can be selected at a time.
Example: Animated Custom Radio Button
This example creates animated radio buttons with smooth transitions and inner indicators −
<!DOCTYPE html>
<html>
<head>
<style>
input[type=radio] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 24px;
height: 24px;
border: 3px solid lightblue;
border-radius: 50%;
background-color: white;
cursor: pointer;
transition: all 0.3s ease;
margin-right: 10px;
position: relative;
}
input[type=radio]:checked {
border-color: lightgreen;
background-color: lightgreen;
}
input[type=radio]::after {
content: "";
width: 8px;
height: 8px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.2s ease;
}
input[type=radio]:checked::after {
transform: translate(-50%, -50%) scale(1);
}
label {
display: flex;
align-items: center;
margin: 15px 0;
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Choose Your Favorite Color</h2>
<form>
<label>
<input type="radio" name="color" value="blue">
Blue
</label>
<label>
<input type="radio" name="color" value="green">
Green
</label>
<label>
<input type="radio" name="color" value="red">
Red
</label>
</form>
</body>
</html>
Three custom radio buttons appear with light blue borders. When selected, they smoothly animate to green with a white inner circle indicator appearing with a scaling animation.
Conclusion
The appearance property is essential for creating custom radio buttons. Combined with CSS transitions and pseudo-elements, you can create engaging, animated radio buttons that enhance user experience while maintaining accessibility.
Updated on: 2026-03-15T15:19:49+05:30
1K+ Views
Advertisements