.field:invalid { border-color: #dc2626; }Un email incomplet sau gol când este required primește marginea roșie.
LECȚIA 87 DIN 100
Arată starea invalidă a unui câmp
Schimbă marginea unui email care nu îndeplinește validarea HTML.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
:invalid corespunde unui control ale cărui constrângeri HTML nu sunt satisfăcute. Culoarea este feedback vizual suplimentar; mesajul și asocierea semantică a erorii cer logică separată într-un formular real.
.field { border-color: #dc2626; }O margine roșie permanentă nu reflectă rezultatul validării controlului.
PASUL 2 · APLICĂ
Exercițiul tău
Setează border-color: #dc2626 numai pentru .field:invalid.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Starea invalidă folosește #dc2626.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Pseudo-clasa citește starea de validitate stabilită de tipul email și atributul required.