Tutorials


CSS :checked property


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.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about