:user-valid
The companion to ':user-invalid', this targets form elements that are valid, but only after the user has finished interacting with them. It is great for showing 'Success' checkboxes without cluttering the form initially.
Syntax
/* Usage Example */
input:user-valid {
border-color: green;
/* shows green success border only after interaction is complete */
}:user-valid 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