:user-invalid
A modern pseudo-class that targets form elements that are currently invalid, but ONLY after the user has interacted with them. This avoids showing scary red errors immediately before the user has even started typing.
Syntax
/* Usage Example */
input:user-invalid {
border-color: red;
/* show error style only after user has finished typing and exited the field */
}
input:user-invalid + .error-msg{
display: block;
}:user-invalid Browser support
Newly available
Since
2023 87% global usage
Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
119+
88+
16.5+
119+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more