Invalid
About
The :invalid pseudo-class matches elements that are in an invalid state.
Required Input
Required inputs are considered invalid if they don't have a value.
- Enter a value, the selector will not match anymore
Email Input
An optional email input is invalid if it has a value that is not a valid email address.
- Enter an invalid email address to make the selector match
- Enter a valid email address, the selector will not match anymore
Min/Max Length
Inputs with a minLength / maxLength are considered invalid if they have a value that is out of range.
- Enter between 5 and 10 chars, the selector will not match anymore
- Enter a value shorter than 5 characters to make the selector match again
Number input
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 out of range, the selector will not match anymore
- Enter a value that is in range, the selector will match again