← All Examples

CSS Input Validation

Real-time form validation feedback using :valid, :invalid, and :user-invalid.

Published May 19, 2026

Demo

Enter a valid email address
At least 3 characters required

HTML

<div class="field">
  <input type="email" placeholder="Email" required>
  <span class="field-icon"></span>
  <div class="hint">Enter a valid email</div>
</div>

CSS

input {
  border: 2px solid #ccc;
  border-radius: 8px;
  transition: border-color .2s;
}

input:user-invalid { border-color: #ef4444; }
input:user-valid   { border-color: #22c55e; }

/* Sibling icon reacts to input state */
input:user-invalid ~ .field-icon { color: #ef4444; }
input:user-valid   ~ .field-icon { color: #22c55e; }

/* Hint text reacts too */
input:user-invalid ~ .hint { color: #ef4444; }

How it works

:user-invalid is the key — unlike :invalid, it only applies after the user has interacted with the field, preventing red borders on untouched empty required inputs. :user-valid triggers on a valid value after interaction. Sibling combinators let the hint text and icon react to the <input>'s state.