CSS :valid Selector

What You’ll Learn

The :valid pseudo-class styles form elements whose values pass HTML5 validation. Pair it with :invalid to give users instant green success feedback when their input is correct.

Introduction

The CSS :valid pseudo-class matches form controls whose current value satisfies all HTML5 validation constraints. When a user enters a correct email, a number within range, or fills a required field properly, that input becomes :valid and your success styles apply.

It works on input, textarea, and select elements that have validation attributes like required, type="email", min/max, or pattern.

Definition and Usage

Use :valid to reinforce correct input with green borders, light green backgrounds, or checkmark icons. It is the positive counterpart to :invalid and together they create a complete real-time validation UX without JavaScript for basic forms.

📝 Syntax

The syntax for the :valid pseudo-class is:

:valid {
  /* CSS properties */
}

Scope to specific input types or form contexts:

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

input[type="email"]:valid {
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

Validation Triggers

Syntax Rules

• Only applies to form controls: input, textarea, select.
• The element needs at least one validation constraint to meaningfully toggle between :valid and :invalid.
• Pair with :invalid for complete validation feedback.
• Use input:focus:invalid or :not(:placeholder-shown):invalid to delay error styling.
• Optional fields with no constraints often match :valid even when empty.

Related Topics

• :invalid — style fields that fail validation
• :required — style mandatory fields
• :in-range — numeric range validation sibling
• ::placeholder — style hint text in fields
• :focus — style fields while user types

When to Use :valid

:valid improves form UX in these scenarios:

• Registration forms — Show green checkmarks when email and password meet rules.
• Checkout flows — Confirm card number format and zip code as users type.
• Survey inputs — Highlight completed numeric age or rating fields.
• Search filters — Indicate valid date ranges in filter forms.
• Multi-step wizards — Enable the next step only when current fields are :valid.

Examples Gallery

Practice :valid with success/error pairs, email fields, number ranges, and signup form layouts.

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

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

input {
  padding: 0.5rem;
  border-radius: 0.4rem;
  width: 100%;
}

input[type="email"]:valid {
  border-color: #16a34a;
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

input[type="email"]:invalid {
  border-color: #dc2626;
  background: #fef2f2;
}

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

input[type="number"]:invalid {
  border-color: #dc2626;
  background: #fef2f2;
}

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

.signup-form input:invalid {
  border-color: #dc2626;
  background: #fef2f2;
}

.signup-form input {
  padding: 0.5rem 0.75rem;
  border: 2px solid #cbd5e1;
  border-radius: 0.4rem;
  width: 100%;
}

💬 Usage Tips

• Pair with :invalid — Always style both states for complete feedback.
• Use green sparingly — Light green backgrounds work better than loud neon.
• Scope selectors — Use input:valid instead of bare :valid when possible.
• Delay error styling — Show :invalid only on :focus or after first blur to avoid red fields on load.
• Add HTML constraints — :valid only works when inputs have required, type, or pattern.
• Combine with labels — Visual color cues supplement, but never replace, accessible error messages.

⚠️ Common Pitfalls

• Empty optional fields — Inputs with no constraints may match :valid even when empty.
• Red on page load — Empty required fields are :invalid immediately; delay error display.
• Not for all elements — :valid only works on form controls, not div or p.
• Over-reliance on CSS — Complex validation still needs JavaScript or server-side checks.
• Color-only feedback — Do not rely solely on green/red; add text error messages.
• Browser differences — Test validation behavior across Chrome, Firefox, and Safari.

♿ Accessibility

• Use visible labels — Every field needs a <label>; color alone is not enough.
• Announce errors — Pair CSS with aria-invalid and descriptive error text for screen readers.
• Do not rely on color — Add icons or text like “Valid email” alongside green borders.
• Maintain contrast — Green text on light green backgrounds must still meet WCAG guidelines.
• Focus management — Move focus to the first invalid field on submit for keyboard users.

💡 Best Practices