CSS :invalid Selector

CSS :invalid Selector

The :invalid selector in CSS is a powerful tool for enhancing the user experience, especially during form validation. It targets form elements that contain invalid input, allowing developers to apply specific styles to those elements. This helps users to easily identify errors in their input, ensuring they can correct them before submission.

Definition

The :invalid pseudo-class applies to form elements that do not have a valid value. It is often used in conjunction with HTML5 form validation attributes like required, pattern, min, max, and type. When a user inputs data that does not meet the criteria specified by these attributes, the element is considered invalid, triggering the styles defined by the :invalid selector.

Browser Support

As seen in the table, most modern browsers support the :invalid selector, but Internet Explorer does not.

Usage

The :invalid selector is typically used in the styles of form elements to provide user feedback when their input is incorrect. It is defined in your CSS and can be applied to input fields, text areas, and select elements. Here’s when and how to use it:

• Use with form elements that have required attributes.
• Combine it with other pseudo-classes for improved user interface.
• Should be included in styles when designing forms to enhance user experience.

Examples

Let’s take a look at a simple example of using the :invalid selector in a form:

        
        <form>
            <label for="email">Email: </label>
            <input type="email" id="email" required>
            <span class="error-message">Please enter a valid email address.</span>
            <br>
            <input type="submit">
        </form>
        
        

        
        input:invalid {
            border: 2px solid red;
            background-color: #f8d7da;
        }

        input:valid {
            border: 2px solid green;
            background-color: #d4edda;
        }
        
        

In this example, when the user inputs a wrong or invalid email format, the input field’s border will turn red and the background color will change to a light red. When a valid email is inputted, the field will show a green border and a light green background.

Visual Representation

Related Selectors