CSS :invalid

The :invalid CSS pseudo-class represents any input or form element that is not filled out correctly according to the validation rules set in place. This can be useful when styling form elements to provide visual feedback to users on where they have entered incorrect data.

Let's take a look at an example using a simple form with an input field that requires an email address:

In this example, the :invalid pseudo-class is used to apply a red border to the input field when the user tries to submit the form without entering a valid email address. This provides a visual cue to the user that the input is incorrect.

You can customize the styling of an :invalid element to suit your design needs. For example, you can change the border color, background color, or add an error message next to the input field.

It's important to note that the :invalid pseudo-class only applies to form elements that have validation rules set, such as required, pattern, minlength, maxlength, etc.

Below is the CSS code used in the example:

input:invalid {
  border: 2px solid red;
}

Feel free to experiment with different styles and validation rules to enhance the user experience on your website!