CSS :invalid Selector

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 8 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The :invalid selector in CSS is used to select form elements whose values fail to meet validation criteria. It is especially useful for styling form inputs that have incorrect or incomplete data based on input type, pattern, or required fields.

This selector helps enhance form usability and provides visual feedback to users during input.

💡 Syntax

The signature of the :invalid Selector is as follows:

Syntax

Copied

:invalid {
    /* CSS properties */
}

The :invalid selector applies to form elements such as <input>, <textarea>, and <select> that have built-in validation rules, including type, pattern, min, max, or the required attribute.

📝 Example

Here’s a practical example that demonstrates the use of the :invalid selector:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :invalid Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" required>
        
        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="18" max="65" placeholder="Enter your age" required>
        
        <button type="submit">Submit</button>
    </form>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for invalid form elements */
:invalid {
    border: 2px solid red;
    background-color: #ffe0e0;
}

/* Style for valid form elements */
:valid {
    border: 2px solid green;
    background-color: #e0ffe0;
}

In this example:

If the email input field is left empty or contains an invalid email address, it will be styled with a red border and a light red background.
The age input must be a number between 18 and 65. If it’s outside this range or left empty, it will also be marked as invalid.

💬 Usage Tips

The :invalid selector works in conjunction with built-in HTML5 validation attributes like type, pattern, required, min, and max.
You can combine :invalid with other selectors to create more specific styling rules. For instance, input:invalid will apply only to invalid input elements.
Pair :invalid with :valid to provide users with feedback when they correct their input.

⚠️ Common Pitfalls

The :invalid selector will not work if the form or input fields lack validation rules such as required, pattern, or type.
Different browsers may show their own validation styles (such as tooltips or borders), so it’s important to test your styles across browsers to ensure consistent behavior.
If JavaScript is used for custom validation, it might override the default browser validation and affect how :invalid works.