Show an invalid field state

Change the border of an email field that fails HTML validation.

Official sourceW3C Selectors — :invalidReviewed: 2026-08-26

STEP 1 · LEARN

How it works

:invalid matches a control whose HTML constraints are not satisfied. Colour is extra visual feedback; messaging and semantic error association require separate logic in a real form.

Correct example

.field:invalid { border-color: #dc2626; }

An incomplete or empty required email receives a red border.

Common mistake

.field { border-color: #dc2626; }

A permanent red border does not reflect the control validation result.

STEP 2 · APPLY

Your exercise

Set border-color: #dc2626 only for .field:invalid.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The invalid state uses #dc2626.
The target element is present in the page.

Explain the solution logic

The pseudo-class reads the validity state established by the email type and required attribute.

How it works

Your exercise

Write and see the result

What needs to pass