Validation That Waits For You

#:user-invaliduser-invalid

Apply invalid styles only after user interaction.

live_demo

code

.input-eager:invalid {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px var(--rose-dim);
}

.input-smart:user-invalid {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px var(--rose-dim);
}