← Back to pseudo-classes

CSS Pseudo-class / Element

:invalid

Form

Selects form elements whose value fails validation constraints.

Syntax

input:invalid { }

Example

input:invalid { border-color: #ef4444; }

Common use cases

  • Red border on invalid inputs
  • Showing error states on email or number fields
  • Blocking form submission visually

Practical developer insight

Avoid styling :invalid on page load — inputs are invalid before the user touches them. Combine with :not(:placeholder-shown) for better UX.

Related

:valid:required:focus