:valid
`:valid` matches a field whose value passes the built-in checks; `:invalid` matches one that does not.
Syntax
input:valid { … } input:invalid { … }Examples
A correct and an incorrect email:
<style>
input:valid { border: 2px solid seagreen; }
input:invalid { border: 2px solid crimson; }
</style>
<input type="email" value="anna@example.com">
<input type="email" value="not an email">Notes
:invalid applies right away, so an empty required field is red before the user has typed anything. To show errors only after the user has interacted with the field, use :user-invalid.
See also
- :user-invalid — Matches an invalid field only after the user has interacted with it; `:user-valid` is the opposite.
- :required — Matches fields with the `required` attribute; `:optional` matches those without it.
Related recipes
In the tutorial
- Styling forms — How to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.