← Back to pseudo-classes

CSS Pseudo-class / Element

:valid

Form

Selects form elements whose value passes validation constraints.

Syntax

input:valid { }

Example

input:valid { border-color: #3dffa0; }

Common use cases

  • Green border on valid inputs
  • Real-time form validation feedback
  • Enabling submit buttons conditionally

Practical developer insight

Be careful — :valid matches empty optional fields too. Combine with :not(:placeholder-shown) to only style fields the user has actually filled in.

Related

:invalid:required:focus