CSS :invalid Selector

What You’ll Learn

The :invalid pseudo-class styles form fields whose values fail validation rules. It provides instant visual feedback during data entry.

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 inputs with incorrect or incomplete data based on type, pattern, required, or range constraints.

This selector helps enhance form usability and provides visual feedback to users as they type.

Definition and Usage

Use :invalid on its own or scoped to elements: input:invalid, textarea:invalid, or input[type="email"]:invalid. Styles apply while the field’s value does not satisfy its validation constraints.

📝 Syntax

The syntax for the :invalid pseudo-class is:

:invalid {
  /* CSS properties */
}

The :invalid selector applies to <input>, <textarea>, and <select> elements with built-in validation rules.

Basic Example

:invalid {
  border: 2px solid #dc2626;
  background-color: #fef2f2;
}

:valid {
  border: 2px solid #16a34a;
  background-color: #f0fdf4;
}

Common Validation Triggers

Syntax Rules

• Inputs need validation constraints (required, type, pattern, etc.) for meaningful :invalid matching.
• Empty required fields often match :invalid immediately on page load.
• Scope with element selectors: input:invalid avoids styling unrelated elements.
• Pair with :valid for complete positive/negative feedback.
• Always validate on the server — CSS is for UX only, not security.

Related Selectors

• :valid — matches inputs that pass all validation rules
• :in-range — value within min/max only (narrower than :invalid)
• :out-of-range — value outside min/max only
• :required — matches fields with the required attribute
• :focus — combine to show errors only while editing

When to Use :invalid

:invalid improves form UX with real-time validation feedback:

• Registration forms — Highlight invalid email, password, or username fields instantly.
• Required fields — Show red styling when mandatory inputs are empty or incomplete.
• Pattern matching — Flag phone numbers or zip codes that don’t match pattern.
• Numeric limits — Indicate age or quantity values that fail min/max rules.
• Multi-step wizards — Visually mark steps with invalid fields before allowing progression.

Examples Gallery

Practice :invalid with email forms, scoped inputs, delayed error display, and pattern validation.

<style>
  :invalid {
    border: 2px solid #dc2626;
    background: #fef2f2;
  }
  :valid {
    border: 2px solid #16a34a;
    background: #f0fdf4;
  }
  input {
    padding: 0.5rem;
    border-radius: 0.4rem;
    width: 100%;
  }
</style>

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" required>

  <label for="age">Age (18–65):</label>
  <input type="number" id="age" min="18" max="65" required>
</form>

input[type="email"]:invalid {
  border-color: #dc2626;
  background: #fef2f2;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

input[type="email"]:valid {
  border-color: #16a34a;
  background: #f0fdf4;
}

input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
  background: #fef2f2;
}

input:valid {
  border-color: #16a34a;
  background: #f0fdf4;
}

<style>
  input:invalid {
    border-color: #dc2626;
  }
  input:valid {
    border-color: #16a34a;
  }
</style>

<label for="phone">Phone (10 digits):</label>
<input type="tel" id="phone"
  pattern="[0-9]{10}" placeholder="1234567890" required>

💬 Usage Tips

• HTML5 attributes — Works with required, type, pattern, min, max, and length constraints.
• Pair with :valid — Give users positive feedback when they correct mistakes.
• Scope selectors — Use input:invalid instead of bare :invalid when possible.
• Delay initial errors — Use :invalid:not(:placeholder-shown) to avoid red empty fields on load.
• Server validation — CSS validation is cosmetic; always validate on the server.

⚠️ Common Pitfalls

• No validation rules — Without required, type, or pattern, :invalid has little effect.
• Red fields on page load — Empty required inputs match :invalid immediately; delay with placeholder-shown trick.
• Browser default UI — Native tooltips and bubbles may clash with custom styles; test across browsers.
• Custom JS validation — JavaScript validation libraries may bypass native :invalid matching.
• Security — Never rely on CSS or client-side validation alone for data integrity.

♿ Accessibility

• Do not rely on color alone — Pair red borders with text error messages linked via aria-describedby.
• Associate labels — Every input needs a <label> so screen readers announce the field name.
• aria-invalid — Set aria-invalid="true" on invalid fields for assistive technology (often via JS).
• Clear error text — Explain what is wrong (“Enter a valid email”) not just that the field is red.
• Contrast — Error borders and backgrounds must meet WCAG contrast requirements.

💡 Best Practices