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

  1. 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.
  2. 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.
  3. 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

  1. Supported Elements:

    • The :checked pseudo-class applies to <input> elements of type checkbox and radio, and <option> elements in a <select> dropdown.
  2. Form Elements Only:

    • :checked does not apply to elements other than form controls. It specifically targets elements that have a "checked" state.
  3. 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.
  4. Browser Support:

    • The :checked pseudo-class is well-supported across modern browsers, making it reliable for styling form controls.