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 Style the Selected Label of a Radio Button?
In this article, we will style the label for the radio button which is currently selected. CSS allows you to eliminate the default radio button and style the selected and unselected states of the labels. This is accomplished with the help of the :checked pseudo-class and adjacent sibling selectors.
Syntax
input[type="radio"]:checked + label {
/* Styles for selected label */
}
label {
/* Default label styles */
}
Styling the Selected Label of a Radio Button
To begin with, we hide the original circular radio button by setting its opacity to 0 or using display: none. Next, we apply default styles to the label elements for unselected states. We set the display property of the label to inline-block and apply styles like background, padding, font, and cursor properties.
The :checked pseudo-class combined with the adjacent sibling selector (+) ensures that styles are applied only to the label that follows a checked radio input.
Example
Here's a complete example showing how to create attractive styled radio button labels
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
.radio-container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.radio-container input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.radio-container label {
display: inline-block;
background-color: #e0e0e0;
padding: 12px 20px;
font-size: 16px;
cursor: pointer;
margin-right: 10px;
border-radius: 25px;
transition: all 0.3s ease;
color: #333;
}
.radio-container input[type="radio"]:checked + label {
background-color: #4caf50;
color: white;
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}
.radio-container label:hover {
background-color: #dcdcdc;
transform: translateY(-2px);
}
.radio-container input[type="radio"]:focus + label {
outline: 2px solid #4caf50;
outline-offset: 2px;
}
</style>
</head>
<body>
<h3>Choose your specialization:</h3>
<div class="radio-container">
<input type="radio" id="option1" name="options" checked>
<label for="option1">Full Stack</label>
<input type="radio" id="option2" name="options">
<label for="option2">Front-End</label>
<input type="radio" id="option3" name="options">
<label for="option3">Back-End</label>
</div>
</body>
</html>
Three styled radio button labels appear as rounded buttons. The selected option (Full Stack) is highlighted in green with white text and a slight scale effect. Unselected options appear in gray. Hovering over labels creates a lift effect.
Key Properties Used
| Property | Purpose |
|---|---|
opacity: 0 |
Hides the default radio button |
:checked + label |
Targets the label of a selected radio button |
transition |
Creates smooth animations between states |
transform |
Adds visual feedback like scaling or movement |
Conclusion
Using the :checked pseudo-class with adjacent sibling selectors allows you to create custom radio button designs. This technique provides better user experience by making radio buttons more visually appealing and interactive.
1K+ Views
