CSS Reference Manual

CSS @rules

Complete List of CSS Properties

CSS Functions (Functions)Comprehensive Handbook of CSS Selectors

CSS :invalid selector

:invalid CSS pseudo-class represents any content that has not passed validation, such as <input> or other <form> elements .

　Complete CSS Selector Reference Manual

Online Example

If the value of the input element is illegal, set the style to blue:

Example

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
<style>
input:invalid
{
　　　　border:2px solid blue;
}
</style>
</head>
<body>
<h3> :invalid selector example demonstration.</h3>
<input type="email" value="supportEmail"　/>
<p>Please enter a valid e-email address, see style changes.</p>
</body>
</html>

Test and see ‹/›

Definition and Usage

:invalid selector is used to set specified styles when the value of a form element is illegal.

Note: 　:invalid selector only applies to elements that can specify a range of values, such as the min and max attributes of input elements, and correct email fields, valid numeric fields, etc.

Browser Compatibility

The numbers in the table indicate the first browser version number that supports this attribute.

Selector
:invalid	10.0	10.0	4.0	5.0	10.0

CSS Syntax

/*　Any invalid <input> can be selected　*/
input:invalid　{
　　background-color: pink;
}

This pseudo-class is very useful for highlighting user field errors.

CSS Selector :valid