.field { border: 2px solid #94a3b8; } .field:focus { border-color: #2563eb; }Marginea albastră confirmă ce câmp primește tastarea.
LECȚIA 84 DIN 100
Evidențiază câmpul focalizat
Schimbă conturul câmpului când utilizatorul scrie în el.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
:focus selectează elementul care primește intrarea curentă. Schimbarea border-color poate completa indicatorul implicit, dar nu trebuie folosită pentru a elimina complet outline-ul platformei fără alternativă.
.field { border-color: #2563eb; }O margine permanentă nu diferențiază câmpul activ de celelalte.
PASUL 2 · APLICĂ
Exercițiul tău
Păstrează marginea de bază și setează border-color: #2563eb pentru .field:focus.
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
- ○Câmpul are o margine de bază neutră.
- ○Focusul schimbă marginea în #2563eb.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Regula de stare suprascrie doar culoarea marginii pe durata focusului.