The :checked
pseudo-class in CSS is used to select input elements that are checked or selected. This pseudo-class is commonly used with form elements such as checkboxes and radio buttons to apply styles when they are checked or selected by the user.
Syntax
input:checked {
/* styles */
}
input
: The type of input element you want to target (e.g.,input
,select
).:checked
: The pseudo-class that selects elements that are checked or selected.
How It Works
Basic Usage:
- You can use
:checked
to apply styles to checkboxes or radio buttons when they are selected.
input[type="checkbox"]:checked { background-color: green; border-color: green; }
- In this example, when a checkbox is checked, its background and border color will change to green.
- You can use
Radio Buttons:
:checked
can also be used with radio buttons to style the selected option.
input[type="radio"]:checked { accent-color: blue; /* CSS property to change the color of the radio button */ }
- This example changes the color of the selected radio button.
Styling Labels:
- When used with labels, you can create custom designs for form controls.
input[type="radio"]:checked + label { color: red; font-weight: bold; }
- In this case, when a radio button is checked, the adjacent label will be styled with red color and bold text.
Examples
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checked Selector Example</title>
<style>
input[type="checkbox"]:checked {
background-color: yellow;
}
input[type="radio"]:checked + label {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<label>
<input type="checkbox"> Option 1
</label>
<label>
<input type="checkbox"> Option 2
</label>
<fieldset>
<legend>Select an option:</legend>
<label>
<input type="radio" name="group" value="1"> Option A
</label>
<label>
<input type="radio" name="group" value="2"> Option B
</label>
</fieldset>
</form>
</body>
</html>
Explanation:
input[type="checkbox"]:checked
:- Applies a yellow background to checkboxes when they are checked.
input[type="radio"]:checked + label
:- Styles the label adjacent to a selected radio button with blue color and bold text.
Important Points
Supported Elements:
- The
:checked
pseudo-class applies to<input>
elements of typecheckbox
andradio
, and<option>
elements in a<select>
dropdown.
- The
Form Elements Only:
:checked
does not apply to elements other than form controls. It specifically targets elements that have a "checked" state.
Adjacent Selectors:
- You can use the
+
adjacent sibling selector with:checked
to style related elements, like labels or other elements directly following the checked input.
input:checked + .description { display: block; }
- This example shows an element with the class
.description
when an input is checked.
- You can use the
Browser Support:
- The
:checked
pseudo-class is well-supported across modern browsers, making it reliable for styling form controls.
- The