Iată un exemplu de implementare:
Desigur, la nest.com, offsetul (schimbarea textului și afișarea elementului de etichetă) este mai eficient. Folosind js, putem implementa mișcare mai ușoară, dar sarcina noastră este să implementăm totul pe CSS pur.
Această tehnică se bazează pe următoarele: elementul de etichetă este un substituent pseudo.
remarcă
Există cel puțin două motive pentru utilizarea acestei tehnici:
- Posibilitatea de a economisi spațiu. Deoarece eticheta și intrarea sunt combinate, economisiți spațiu. Când câmpul este focalizat, eticheta rămâne vizibilă datorită poziționării corecte.
- Câmpul este făcut ca un buton mare. După cum știți, atributele etichetei și id-ul câmpului vă permit să conectați elementele, dar puteți chiar mai mult să actualizați relația folosind un dreptunghi mare. Dreptunghiul cere să umpleți câmpul și faceți clic pe buton.
Trick 1 - eticheta înlocuiește placeholderul
Există o div. care conține eticheta și intrarea (ceea ce aveți nevoie în orice caz, deoarece eticheta și intrarea trebuie să fie în elemente bloc). Poziționarea relativă este folosită pentru div. Datorită poziționării relative, putem plasa absolut eticheta și câmpul de text din div. Dacă plasați câmpul deasupra cu un fundal transparent, veți vedea încă eticheta direct sub câmp, chiar dacă faceți clic pe câmp.
Trick 2 - pseudo-clasă: focus și combinator sora
Ordinea etichetei și a intrării este irelevantă, deoarece este legată semantic prin atributul for. Dar dacă punem mai întâi câmpul, atunci putem folosi puzzle-ul de focalizare și combinatorul sora (+), astfel încât să putem atribui stiluri elementului de etichetă atunci când ne concentrăm asupra câmpului.
Cu o etichetă, sunteți liber să faceți tot ce doriți. În exemplul meu, eticheta (cu focalizare pe câmp) este situată în partea de jos a blocului și în raport cu partea dreaptă a blocului.
Trick 3 - pseudo-clasă: validă sau validată
Dacă câmpul este plin și a pierdut focalizarea, atunci ar fi ciudat în acest caz să lăsați eticheta de text în ea. Din fericire, există o pseudo-clasă valabilă în CSS. care verifică câmpurile de formă pentru corectitudine (după tip). De exemplu, bifați câmpul obligatoriu și prezența textului în acesta poate fi după cum urmează:
Rețineți că textul elementului de etichetă este vizibil deoarece intrarea are un fundal transparent. Pentru a ascunde eticheta. trebuie doar să setăm fundalul pentru intrare:
Restul codului afectează designul elementelor.
Trimiteți-le prietenilor: