CSS invalid and valid state

I have form that when input is valid it shows image (checmark). Once the focus from that input field is gone it still shows check mark if input is valid which is what I want.
I am trying to do same for invalid state but the only problem is that when page loads and since each form input “empty” is not valid all my field have red check mark because they are technically invalid.

How would I resolve this with CSS only?

I don’t think you can with css alone, if the input is required then empty is invalid so the pseudo class is selected.
It can work on non-required inputs or displaying only on focus.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.