Validation That Waits For You

#:user-invaliduser-invalid

:invalid fires immediately on page load. :user-invalid only triggers after the user has actually interacted and blurred.

live_demo

code

/* Bad — red on page load */
input:invalid { border-color: red; }

/* Good — red only after user interaction */
input:user-invalid { border-color: red; }