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
Role of CSS :checked Selector
The CSS :checked pseudo-class selector targets and styles input elements of type checkbox or radio button that are currently checked or selected. This selector allows you to apply specific styles to form controls based on their state.
Syntax
input:checked {
/* CSS properties */
}
Example 1: Styling Checked Checkboxes
The following example demonstrates how to style checked checkboxes with enhanced size and background color −
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"]:checked {
width: 25px;
height: 25px;
accent-color: #007bff;
}
.form-container {
padding: 20px;
font-family: Arial, sans-serif;
}
.checkbox-item {
margin: 10px 0;
font-size: 16px;
}
</style>
</head>
<body>
<div class="form-container">
<p>Select your favorite sports:</p>
<form>
<div class="checkbox-item">
<input type="checkbox" id="football" value="Football">
<label for="football">Football</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="cricket" value="Cricket">
<label for="cricket">Cricket</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="tennis" checked value="Tennis">
<label for="tennis">Tennis</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="badminton" value="Badminton">
<label for="badminton">Badminton</label>
</div>
</form>
</div>
</body>
</html>
A form displaying four sports options with checkboxes. The Tennis checkbox is pre-checked and appears larger (25px) with a blue accent color. When other checkboxes are clicked, they also take on the enhanced styling.
Example 2: Styling Radio Buttons
The :checked selector also works with radio buttons to style the selected option −
<!DOCTYPE html>
<html>
<head>
<style>
input[type="radio"]:checked {
transform: scale(1.3);
accent-color: #28a745;
}
.radio-group {
padding: 20px;
font-family: Arial, sans-serif;
}
.radio-item {
margin: 8px 0;
font-size: 16px;
}
</style>
</head>
<body>
<div class="radio-group">
<p>Choose your skill level:</p>
<div class="radio-item">
<input type="radio" id="beginner" name="level" value="beginner">
<label for="beginner">Beginner</label>
</div>
<div class="radio-item">
<input type="radio" id="intermediate" name="level" value="intermediate" checked>
<label for="intermediate">Intermediate</label>
</div>
<div class="radio-item">
<input type="radio" id="expert" name="level" value="expert">
<label for="expert">Expert</label>
</div>
</div>
</body>
</html>
A radio button group showing three skill levels. The "Intermediate" option is pre-selected and appears larger (scaled 1.3 times) with a green accent color. When other radio buttons are selected, they adopt the same enhanced styling.
Conclusion
The :checked pseudo-class selector is essential for creating interactive and visually appealing form interfaces. It allows you to style checked checkboxes and radio buttons differently, providing clear visual feedback to users about their selections.
Updated on: 2026-03-15T12:17:39+05:30
299 Views
Advertisements