CSS :invalid Pseudo-class

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS :invalid pseudo-class highlighting form fields that fail HTML validation
Definition

Definition and Usage

The :invalid pseudo-class matches a form control whose contents fail HTML constraint validation.

Typical cases: a bad type="email" value, an empty required field, a pattern mismatch, or a number outside min/max. Pair it with :valid for clear success/error feedback.

Baseline · Widely available.

Not deprecated. Standard HTML / Selectors Level 4 pseudo-class. Widely available since July 2015.

Accessibility Do not rely on color alone

Red borders help, but add text or an icon so color-blind users still understand the error. Prefer delaying harsh styles until interaction when possible.

Syntax

CSS Syntax

syntax.css
:invalid { /* styles when validation fails */ }

Often combined with a type or constraint: input[type="email"]:invalid or input:required:invalid.

Patterns

Common Patterns

PatternDescriptionTry it
Email / URLBad typed values match :invalidTry it
RequiredEmpty required fields match until filledTry it
PatternValues that fail pattern matchTry it
Form levelform:invalid when any control failsTry it
Approach

How to Use :invalid

Add HTML constraints first, then style the invalid (and valid) states.

  1. Use real constraints: required, type, pattern, min/max.
  2. Style failures with :invalid (outline, border, or background).
  3. Add :valid so fixed values get positive feedback.
  4. Do not rely on color alone — keep labels clear and consider :user-invalid to wait until interaction.
Try it

Live Preview

Edit the fields. Invalid controls get a red outline via :invalid; valid ones get a green outline via :valid.

Form sample

Starts with intentionally bad values so you can see :invalid immediately.

Interactive

Checking…

Code

CSS Examples

Each snippet focuses on :invalid. Use Try It Yourself for a live editor.

Example 1 — Invalid Email

Outline an email field when the value is not a valid email.

CSS
<style>
  input:invalid {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
  }
</style>

<label for="email">Email</label>
<input id="email" type="email" value="na@[email protected]">
Try It Yourself

How It Works

  1. Use the right type. type="email" enables email constraints.
  2. Start with a bad value. na@[email protected] fails validation.
  3. Match with :invalid. The red outline marks the failure.
  4. Fix the value. A proper email clears :invalid (and can match :valid).

Example 2 — Required Field

Highlight a required text field while it is empty.

CSS
<style>
  input:required:invalid {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
  }
</style>

<label for="name">Name</label>
<input id="name" type="text" required>
Try It Yourself

How It Works

  1. Mark required. The HTML required attribute sets the constraint.
  2. Empty fails validation. So the control matches :invalid right away.
  3. Combine selectors. :required:invalid targets only required failures.
  4. Type a value. Filling the field clears the invalid state.

Example 3 — Pattern Mismatch

Style a field when its value fails a pattern regex.

CSS
<style>
  input:invalid {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
  }
</style>

<label for="code">Code (a–z only)</label>
<input id="code" type="text" pattern="[a-z]+" value="Test1">
Try It Yourself

How It Works

  1. Add a pattern. [a-z]+ allows only lowercase letters.
  2. Start with a mismatch. Test1 has uppercase and a digit.
  3. :invalid fires. The outline shows the constraint failure.
  4. Type a match. Something like ok becomes valid.

Edge Cases & Pitfalls

:invalid follows HTML validation rules — timing and messaging matter as much as color.

timing

Errors can appear too early

Empty required fields match :invalid on load. Prefer :user-invalid (or focus / placeholder tricks) so errors wait until the user interacts.

vs :valid

Style both states

Pair with :valid so users see when a fix worked, not only when something is wrong.

range

:out-of-range is narrower

:out-of-range covers min/max style failures. :invalid also covers type, pattern, required, and more.

a11y

Color is not enough

Add helper text or an icon next to the field. Do not convey invalid state with red alone.

Compatibility

Browser Support

:invalid is a browser CSS pseudo-class. Node.js, Deno, and Bun do not evaluate it.

✓ Baseline · Widely available since Jul 2015

:invalid

Chrome 10+, Edge 12+, Firefox 4+, Safari 5+, Opera 10+, Samsung Internet 4+, Internet Explorer 10+.

97% Global reach
Google Chrome 10+
Full support
Mozilla Firefox 4+
Full support
Apple Safari 5+
Full support
Microsoft Edge 12+
Full support
Opera 10+
Full support
Samsung Internet 4+
Full support
Internet Explorer 10+
Full support
:invalid Widely supported

Bottom line: Safe for production form styling. Combine with accessible text, not color alone. It is not a server runtime API.

Remember

Key Takeaways

  • Role: style controls that fail HTML validation.
  • Triggers: required, type, pattern, min/max, and more.
  • Pair with :valid: show both error and success states.
  • Practice: delay harsh errors; never use color alone.

One line: let HTML constraints decide validity, then style failures with :invalid.

Frequently Asked Questions

It matches a form control whose current value fails HTML constraint validation — for example a bad email, an empty required field, or a number outside min/max.
Typically input, select, and textarea. A form element can also match :invalid when any of its controls are invalid.
:invalid matches failed constraints. :valid matches when the control satisfies its constraints. Pair them for error and success styling.
An empty required control fails validation immediately, so :invalid matches before the user types. Prefer :user-invalid or focus/placeholder techniques to delay error chrome.
:out-of-range only covers values outside min/max (and similar range constraints). :invalid is broader and includes type, pattern, required, and more.
No. It is a CSS pseudo-class evaluated by the browser from HTML constraint validation, not a Node.js or server runtime feature.

Next: :lang()

Learn the :lang() pseudo-class for language-based styling.

:lang() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS :indeterminate Pseudo-class CSS :lang() Pseudo-class