Here are some CSS pseudo-classes for modern CSS usage for HTML forms.
- :optional
- :required
- :valid
The :valid pseudo-class applies to form elements as well as forms that are in a valid state.
- :invalid
The :valid pseudo-class applies to form elements as well as forms that are in a invalid state.
- :user-valid
The :user-valid pseudo-class represents an element with correct input in a form context, after the user has interacted with it.
- :user-invalid
The :user-invalid pseudo-class represents an element with incorrect input in a form context, after the user has interacted with it.
- :in-range
- :out-of-range
- :read-only
- :read-write
- :disabled
- :enabled
- :checked
- :indeterminate
- :default
- :placeholder-shown
- :focus
- :focus-within
- :focus-visible
- :autofill
- :empty
Combining the :has pseudo-class with these pseudo-classes can be very powerful. Check out Josh Comeau's article, The Undeniable Utility Of CSS :has for a great deep dive into :has. Also, worth checking out is this blog post from Adam Argyle, CSS interpolate-size to the rescue, demoing a login with :has and :user-valid.