CSS :invalid Pseudo-class
Example
Style invalid <fieldset> and <input> elements:
fieldset:invalid {
border: 2px solid red;
background-color: beige;
}
input:invalid {
border: 2px
solid red;
background-color: beige;
}
Try it Yourself »
Definition and Usage
The CSS :invalid pseudo-class is used to style
invalid form elements.
Note: This pseudo-class only works for form elements with limitations, such as input elements with min and max attributes, email fields without a legal email, or number fields without a numeric value, etc.
Note: If any of the radio buttons in a group is required, this pseudo-class is applied to all of them if none of the radio buttons in the group is selected.
Tip: Use the :valid pseudo-class to style valid form elements.
| Version: | CSS4 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the pseudo-class.
| Pseudo-class | |||||
|---|---|---|---|---|---|
| :invalid | 10 | 12 | 4 | 5 | 10 |
CSS Syntax
Related Pages
CSS Selector :valid
