Valid
About
The :valid pseudo-class matches elements that are in a valid state.
Required Input
Required inputs are considered valid if they have a value.
- Enter a value to let the selector match
Email Input
An email input must contain a valid email address to be valid. An empty value is also valid if it's not required.
- Enter an invalid email address, the selector will not match anymore.
- Enter a valid email address, the selector will match again.
Min/Max Length
Inputs with a minLength / maxLength are considered valid if they have a value that is between the specified range or if they are empty (and not required).
- Enter between 5 and 10 chars to make the selector match
- Enter a value that is too short, the selector will not match anymore
Min / Max
The value of a number input must be between the specified min and max values to be valid. An empty value is also valid if it's not required.
- Enter a value that is in range to make the selector match
- Change the value to a number that is not in range, the selector will not match anymore