:user-valid and :user-invalid are what we've always wanted :valid and :invalid to be! And while browser support is decent, if it's not good enough, you can get close to it with :not(:placeholder-shown):valid / :invalid.

Kevin Powell

Learn how to enhance your web forms using a few lines of CSS. It covers how to use CSS selectors like user-valid and user-invalid to provide better feedback to users. The post also discusses how to handle placeholder behavior and improve accessibility for colorblind users.

Improve your forms with a couple lines of CSS