Styling Checked and Unchecked Form Elements

Checked & Not checked

In CSS, the :checked and :not(:checked) pseudo-classes are used to select and style HTML form elements, specifically radio buttons and checkboxes, based on whether they are checked (selected) or not. These pseudo-classes allow you to customize the appearance of these input elements depending on their checked or unchecked state.

:checked Pseudo-Class: This pseudo-class selects form elements that are currently checked or selected. It is primarily used for styling radio buttons and checkboxes when they are in the checked state.

:not(:checked) Pseudo-Class: Conversely, the :not(:checked) pseudo-class selects form elements that are currently not checked or unselected. It is useful for styling radio buttons and checkboxes when they are in the unchecked state.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input pseudo-classes</title>
    <style>
      input[type="radio"]:checked + label {
        color: blue;
      }
      input[type="radio"]:not(:checked) + label {
        color: red;
      }
    </style>
  </head>
  <body>
    <h3>Input pseudo-classes</h3>
    <p>:checked | not(:checked)</p>
    <input type="radio" name="gender" id="male" checked />
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" />
    <label for="female">Female</label>
  </body>
</html>

Live Preview

The provided CSS code is used to style labels that are associated with radio buttons based on whether the radio button is checked or not.

input[type="radio"]:checked + label : This selector targets the label elements that immediately follow a checked radio button (input[type="radio"]:checked). It applies the specified style to these labels when the radio button is checked. color: blue;: This style declaration sets the text color of the labels associated with checked radio buttons to blue.
input[type="radio"]:not(:checked) + label: This selector targets the label elements that immediately follow unchecked radio buttons (input[type="radio"]:not(:checked)). It applies the specified style to these labels when the radio button is not checked.color: red;: This style declaration sets the text color of the labels associated with unchecked radio buttons to red.