Codectionary / Developer documentation / CSS

Form State Pseudo-classes

CSS can style form elements based on their validation and interaction state without any JavaScript. :checked applies to checked checkboxes/radios, :disabled to disabled fields, :required and :optional based on the required attribute, and :valid/:invalid based on constraint validation results.

Syntax

:checked, :disabled, :required, :valid, :invalid

Examples

Styling Checked and Disabled States

Visual feedback for checkbox state and disabled fields.

input[type="checkbox"]:checked {
  accent-color: #3b82f6; /* tints the native checkbox */
}

input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
  1. The checkbox supports a real checked state that can be toggled.
  2. The disabled field is disabled by HTML, while CSS only changes its presentation.
  3. A disabled or checked appearance is not a substitute for the corresponding semantic attribute or state.
HTML used by this example
<p><label><input type="checkbox"> Mark this lesson complete</label></p><p><label>Disabled field <input disabled value="Not editable"></label></p>

Live Validation Styling

Giving instant visual feedback based on native HTML validation.

/* Demo setup: sizing, structure or neutral surfaces. */
input{display:block;padding:.6rem;margin-block:.5rem;border:2px solid #64748b}

input:required {
  border-left: 3px solid #f59e0b; /* marks required fields */
}

input:invalid:not(:placeholder-shown) {
  border-color: red; /* only show invalid state once the user has typed something */
}

input:valid:not(:placeholder-shown) {
  border-color: green;
}
  1. required marks the field’s constraint.
  2. invalid and placeholder-shown determine when validation styles appear.
  3. Typing changes the browser’s validity state; this preview performs no submission or server validation.
HTML used by this example
<label for="address">Email address</label><input id="address" type="email" required placeholder="john@example.com"><p>Try invalid text, then a valid address.</p>

Parameters and values

  • :checked (pseudo-class): Matches checked checkboxes, radios, or selected options
  • :disabled / :enabled (pseudo-class): Matches based on the disabled attribute
  • :required / :optional (pseudo-class): Matches based on the required attribute
  • :valid / :invalid (pseudo-class): Matches based on constraint validation results

Best practices

  • Combine :invalid with :not(:placeholder-shown) to avoid showing an error state before the user has even had a chance to type
  • Use :checked alongside the sibling combinator (~) as a classic CSS-only technique for building toggles and accordions without JavaScript
  • Style :disabled fields clearly (reduced opacity, not-allowed cursor) so users understand why they cannot interact with them
  • Remember :valid/:invalid reflect the browser's native HTML validation - custom JavaScript validation needs its own styling approach, like conditional classes

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading