The :invalid pseudo-class selects all items where the value is invalid (does not match the type of the input data).


The :invalid pseudo-class finds any input or form elements whose content fails to pass validation, according to the field type. It allows you to easily change the appearance of fields, allowing the user to see and correct errors.

Note: If any radio buttons in a group (i.e., with the same name attribute) have a required attribute, the :invalid pseudo-class applies to all of them if none of the buttons in the group are selected.


input:invalid {
  background-color: red;

form:invalid {
  border: 2px solid red;


The default state in this example is invalid; enter a valid @gmail.com address to verify.