CSS Academy · Lesson

:checked :disabled and Form State Pseudos

Style form elements based on their interactive states like checked, disabled, and required.

Form State Pseudo-classes Overview

CSS provides pseudo-classes that reflect HTML form element states. These enable pure-CSS styled form controls without JavaScript.

:checked applies to checkboxes and radio buttons when they are selected, and to <option> elements within selects when chosen.

input[type="checkbox"]:checked + label {
  color: royalblue;
  font-weight: bold;
}