: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.
Quick 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.
Works in all modern browsers. May need a fallback for older browsers.
119+
88+
16.5+
119+