În acest articol, vom vorbi despre caseta de selectare a tipului de intrare HTML și despre modul în care acestea sunt gestionate în PHP.
O singură casetă de selectare
Să creăm formă simplă cu o singură casetă de selectare:
În script PHP ( checkbox-form.php) putem obține opțiunea selectată din matricea $_POST. Dacă $_POST['formWheelchair'] este „ da„, atunci caseta de selectare pentru opțiune este selectată. Dacă caseta de selectare nu a fost setată, $_POST['formWheelchair'] nu va fi setat.
Iată un exemplu de procesare a formularelor în PHP:
$_POST['formSubmit'] a fost setat la " da”, deoarece această valoare este setată în atributul casetă de selectare a valorii:
În loc de " da„puteți seta valoarea „ 1 " sau " pe". Asigurați-vă că și codul de validare din scriptul PHP este actualizat.
Grupul Che-box
Uneori trebuie să afișați un grup de casete de selectare a tipului de intrare PHP pe un formular. Avantajul unui grup de casete de selectare este că utilizatorul poate selecta mai multe opțiuni. Spre deosebire de un buton radio, unde dintr-un grup poate fi selectată o singură opțiune.
Să luăm exemplul de mai sus și pe baza acestuia vom oferi utilizatorului o listă de clădiri:
Rețineți că caseta de selectare a tipului de intrare are același nume (formDoor ). Și că fiecare nume se termină în . Folosind același nume, indicăm că casetele de selectare sunt legate. Cu , indicăm că valorile selectate vor fi disponibile pentru scriptul PHP ca o matrice. Adică, $_POST['formDoor'] returnează mai mult de un rând, ca în exemplul de mai sus; în schimb, se returnează o matrice constând din toate valorile casetei de selectare care au fost selectate.
De exemplu, dacă am selectat toate opțiunile, $_POST['formDoor'] ar fi o matrice formată din: (A, B, C, D, E). Următorul este un exemplu despre cum să afișați valoarea unui tablou:
Dacă nicio opțiune nu este selectată, $_POST['formDoor'] nu va fi setat, așa că utilizați o funcție „goldă” pentru a testa acest caz. Dacă este dată o valoare, trecem prin matrice folosind funcția count(), care returnează dimensiunea matricei și imprimă clădirile care au fost selectate.
Dacă caseta de selectare este bifată pentru " Clădire Acorn„, atunci matricea va conține valoarea „A”. În mod similar, dacă „ Complexul Carnegie", matricea va conține C .
Verificarea dacă este selectată o anumită opțiune
Este adesea necesar să verificați dacă o anumită opțiune este selectată din toate elementele disponibile în grupul de casete de selectare a tipului de introducere HTML. Iată o funcție care efectuează această verificare:
funcția IsChecked($chkname,$value) ( dacă(!empty($_POST[$chkname])) (foreach($_POST[$chkname] ca $chkval) ( if($chkval == $valoare) ( return true; ) ) ) return false; )
Pentru a-l folosi, trebuie doar să sunați la IsChecked ( checkbox_name, valoare). De exemplu:
if(IsChecked("formDoor","A")) ( //faceți ceva... ) //sau folosiți în calcul... $preț += IsChecked("formDoor","A")? o sută; $price += IsChecked("formDoor","B") ? 20:0;
Descărcați exemplu de cod
Descărcați codul de formular PHP din caseta de selectare tip de intrare PHP.
Această publicație este o traducere a articolului „ Gestionarea casetei de selectare într-un procesor de formulare PHP» pregătit de o echipă de proiect prietenoasă
Toți dezvoltatorii de site-uri web, aplicații web și programe desktop știu ce sunt casetele de selectare. Dar acei oameni care sunt departe de a programa, întâlnind un astfel de cuvânt străin de neînțeles, nu înțeleg ce în cauză. De fapt, totul este foarte simplu. Casetele de selectare sunt una dintre cele mai simple controale la crearea formularelor.
Căpușă simplă
Toți oamenii s-au întâlnit în viață cu astfel de simboluri precum un bif, începând de la banca școlii. Când testați, trebuie să marcați opțiunea corectă cu acest semn. Apoi la completarea diverselor chestionare. Ei bine, în prezent, când utilizatorii efectuează o mulțime de acțiuni prin Internet, nu există casete de selectare deloc. Chiar simpla inregistrare pe orice site necesită marcarea unor puncte (hobby-uri, aptitudini).
Comerțul electronic este, de asemenea, în creștere. Atunci când creează o comandă, utilizatorul marchează punctele de interes pentru el. Și adesea la instalare joc pe calculator solicitat să selecteze un alt software. Și aici trebuie să faci o alegere. Deci, casetele de selectare sunt aceleași casete de selectare care sunt utilizate în paginile web.
În crearea site-urilor web
Dezvoltatorii de site-uri web văd acest element oarecum mai larg. La urma urmei, crearea este mai dificilă decât să faci clic o dată pe casetă și să bifezi. Site-urile web sunt dezvoltate folosind limbajul de marcare hipertext. mediu profesional numit doar patru litere - HTML. Și pentru a crea o bifă în el, trebuie să scrieți un cod.
Cum sunt create casetele de selectare? HTML are un element specializat (tag), care este un câmp dotat cu un tip „checkbox”, care se scrie după cum urmează: .
Principii de funcționare
Un astfel de element funcționează după cel mai simplu principiu: fie o afirmare, fie o negare. Dacă caseta de selectare este bifată, atunci browserul web trimite o variabilă care va trimite numele câmpului către server pentru procesare, dacă caseta de selectare nu este bifată, atunci serverul nu primește nimic. Elementul are un atribut opțional cu valoare, dar este opțional.
Uneori se întâmplă ca pe pagină să fie deja bifate unele casete de selectare. Pentru a face acest lucru, dezvoltatorii adaugă un atribut special etichetei, care indică caseta de selectare deja setată implicit. Acest atribut este verificat, adică „verificat”.
Casetele de selectare sunt elemente care nu implică o singură alegere dintre mai multe opțiuni, ci o marcă a tuturor celor potrivite. Pentru dezvoltator, acest lucru contează, deoarece dacă un formular conține mai multe casete de selectare, numele acestora trebuie să fie diferite unul de celălalt.
Casete de selectare dependente
În cazul în care trebuie să selectați o singură opțiune dintr-un set, se folosesc alte elemente - butoane radio, nu casete de selectare. Dar uneori este folosit un tip, cum ar fi casetele de selectare dependente. HTML, împreună cu limbajul de programare JavaScript, vă permite să faceți o casetă de selectare principală de care depind altele. Când faceți clic pe el, mai multe casete de selectare pot fi bifate simultan. Acesta este rar folosit, deoarece contrazice oarecum regula de bifare.
Ca toate etichetele din HTML, casetele de selectare sunt elemente care au propriile lor caracteristici. Cum sunt ele? Am menționat deja atributul pentru pre-marcarea casetei de selectare - bifat. Deoarece casetele de selectare trebuie să aibă nume diferite în aceeași formă, este necesar atributul nume. Doar identifică fiecare casetă de selectare individuală. Atributul value este folosit pentru a seta valoarea care va fi trimisă serverului.
Rețineți că casetele de selectare sunt elemente grafice controale care sunt utilizate în principal în formulare. Și funcționează în trei moduri: neselectat, selectat și nedefinit.
Aplicarea în tabele
Caseta de selectare este folosită nu numai în HTML atunci când se dezvoltă site-uri web și aplicații web. Software-ul precum 1C folosește și acest element. La urma urmei, întreprinderea are multe componente diferite și, atunci când lucrați cu documentație, toate acestea trebuie remarcate. De exemplu, folosind o casetă de selectare, puteți marca o listă de inventar sau clienți cărora doriți să le trimiteți mărfuri.
Ce alte programe folosesc acest element? Excel - toată lumea cunoaște acest program de calcul de la Microsoft, care este des folosit.Principiul casetei de selectare aici este următorul: dacă caseta de selectare este bifată, atunci elementul returnează o valoare adevărată, dacă este nebifat, returnează o valoare falsă. Pentru a introduce o casetă de selectare într-un document, trebuie să activați o filă specială pentru dezvoltator. Acest lucru se face prin parametri care sunt ușor diferiți în fiecare versiune de Excel.
Cum să găsești setările dorite? Întotdeauna există ajutor sau sistem de căutare. După ce fila este activată, puteți insera un element prin comanda „Inserare” a elementului „Controale”. Ideea de remarcat aici este că acest meniu conține și controale ActiveX sub controalele de formular necesare. Există și casete de selectare. Care este diferența dintre ele? Pentru a utiliza controalele ActiveX, aveți nevoie de limbajul de programare VBA încorporat, pe care puțini oameni îl cunosc. Și steaguri obișnuite pot fi imediat legate de celule specificeîn document.
După ce casetele de selectare sunt introduse în Excel, acestea devin bifate în mod implicit. Când faceți clic oriunde în document, marcajul este eliminat. Pentru a inversa selectarea, faceți clic pe caseta de selectare Click dreapta mouse-ul, deoarece butonul din stânga debifează sau bifează caseta.
Trecând cursorul peste caseta de selectare, apăsând lung butonul din stânga, puteți muta elementul în orice loc din document. De asemenea, este convenabil să faceți acest lucru cu tastele de pe tastatură. Când treceți cu mouse-ul peste colțurile unui element, îl puteți extinde la o dimensiune mai mare sau îl puteți micșora. Setările speciale vă permit să personalizați caseta de selectare schimbându-i culoarea, fundalul, cadrul.
Ieșire
Deci, după cum puteți vedea din cele de mai sus, casetele de selectare nu sunt un element complex. GUI dar cu ce se confruntă toată lumea Viata de zi cu zi- o căpușă obișnuită. Conceptul este ușor diferit pentru un programator și un utilizator obișnuit, dar esența este aceeași: acesta este un control care vă permite să faceți selecții multiple atunci când completați un formular. Este important să nu confundați casetele de selectare cu butoanele radio, care vă permit să selectați doar un articol dintr-un set.
Pentru a proiecta casetele de selectare și butoanele radio așa cum este cerut de design, astăzi nu este necesar să folosiți soluții JavaScript (cum ar fi pluginul meu), deoarece. pentru asta poți folosi doar CSS și cu compatibil invers pentru browsere mai vechi (adică nu în detrimentul utilizabilității) care nu acceptă regulile CSS moderne.
Cu alte cuvinte – în browsere moderne casetele de selectare și butoanele radio vor arăta frumos, conform designului dorit, dar în cele vechi (acest lucru se aplică pentru Internet Explorer versiunea 8 și mai jos) vor rămâne cu designul „implicit”, specific fiecărui sistem de operare particular.
In afara de asta, păstrează capacitatea de validare HTML5 elemente cu stil (ceea ce poate să nu fie cazul când utilizați pluginuri JavaScript). În browserele moderne, suportul său a fost mult timp norma.
Caracteristici importante
Pentru a reuși, este important să luați în considerare următoarele:
- Cu excepția, de fapt, eticheta elementului în sine, pe care vrem să o stilăm frumos ( sau ), aveți nevoie de o etichetă
- Etichetă trebuie să fie înaintea etichetei
Trucul este să folosiți pseudo-selectorii :checked și :not. În același timp, caseta de selectare sau butonul radio în sine devine invizibil, iar emularea lor se realizează folosind pseudo-elemente: înainte și: după pentru etichetă
Styling pentru browsere moderne
Luați în considerare ambele opțiuni pentru locația elementului de formular stilizat. Care este cel mai convenabil depinde de tine. Esența acestui lucru nu se schimbă.
Etichetele casetelor de selectare și ale butoanelor radio sunt plasate înaintea etichetei
În cod HTML arata cam asa:
Încă o dată vreau să vă atrag atenția - tag neapărat ar trebui localizat față etichetă
Cod CSS pentru caseta de selectare va fi asa:
Casetă de selectare (poziție: absolut; index z: -1; opacitate: 0; marjă: 10px 0 0 20px; ) .căsuță de selectare + etichetă (poziția: relativă; umplutură: 0 0 0 60px; cursor: pointer; ) .casetă de selectare + etichetă :before (conținut: ""; poziție: absolut; sus: -4px; stânga: 0; lățime: 50px; înălțime: 26px; chenar-rază: 13px; fundal: #CDD1DA; box-shadow: inset 0 2px 3px rgba( 0,0,0,.2); tranziție: .2s; ) .checkbox + etichetă:după ( conținut: „”; poziție: absolut; sus: -2px; stânga: 2px; lățime: 22px; înălțime: 22px; chenar -rază: 10px; fundal: #FFF; casetă-umbră: 0 2px 5px rgba(0,0,0,.3); tranziție: .2s; ) .checkbox:bifat + etichetă:înainte ( fundal: #9FD468; ) .checkbox:checked + label:after ( stânga: 26px; ) .checkbox:focus + label:before (box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255) ,0,.7); )
Cod CSS pentru butonul radio va fi asa:
Radio ( poziție: absolut; z-index: -1; opacitate: 0; margine: 10px 0 0 7px; ) .radio + etichetă ( poziție: relativă; padding: 0 0 0 35px; cursor: pointer; ) .radio + etichetă :înainte (conținut: „”; poziție: absolut; sus: -3px; stânga: 0; lățime: 22px; înălțime: 22px; chenar: 1px solid #CDD1DA; chenar-rază: 50%; fundal: #FFF; ) . radio + etichetă:după ( conținut: ""; poziție: absolut; sus: 1px; stânga: 4px; lățime: 16px; înălțime: 16px; chenar-rază: 50%; fundal: #9FD468; umbră casetă: inserție 0 1px 1px rgba(0,0,0,.5); opacitate: 0; tranziție: .2s; ) .radio:verificat + label:after ( opacitate: 1; ) .radio:focus + label:before (box-shadow: 0 0 0 3px rgba(255,255,0,.7); )
Cu proprietățile de poziție, z-index și opacitate ale claselor .checkbox și .radio, ascundem vizual elementele originale, păstrându-le în același loc în care ar fi elementele stilate. Și cu ajutorul marginii le deplasăm puțin, astfel încât mesajul de validare HTML5 să pară armonios. În funcție de designul casetei de selectare și al butonului radio, această indentație poate fi ajustată.
Etichetele casetelor de selectare și ale butonului radio sunt în interiorul etichetei
cod HTML in acest caz ar fi:
Prin analogie cu versiunea anterioară - eticheta neapărat ar trebui localizat față etichete cu clasa .checkbox__text și .radio__text .
Cod CSS pentru caseta de selectare va fi asa:
Introducere casetă de selectare (poziție: absolut; index z: -1; opacitate: 0; margine: 10px 0 0 20px; ) .checkbox__text (poziție: relativ; umplutură: 0 0 0 60px; cursor: pointer; ) .checkbox__text:before ( conținut: „”; poziție: absolut; sus: -4px; stânga: 0; lățime: 50px; înălțime: 26px; chenar-rază: 13px; fundal: #CDD1DA; casetă-umbră: inserție 0 2px 3px rgba(0,0 ,0,.2); tranziție: .2s; ) .checkbox__text:după ( conținut: ""; poziție: absolut; sus: -2px; stânga: 2px; lățime: 22px; înălțime: 22px; chenar-rază: 10px; fundal: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); tranziție: .2s; ) :checked + .checkbox__text:after (stânga: 26px; ) .checkbox input:focus + . checkbox__text:before ( umbră casetă: inserție 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba( 255.255.0.7); )
Cod CSS pentru butonul radio va fi asa:
Intrare radio (poziție: absolut; z-index: -1; opacitate: 0; margine: 10px 0 0 7px; ) .radio__text (poziție: relativ; padding: 0 0 0 35px; cursor: pointer; ) .radio__text:before ( conținut: ""; poziție: absolut; sus: -3px; stânga: 0; lățime: 22px; înălțime: 22px; chenar: 1px solid #CDD1DA; chenar-rază: 50%; fundal: #FFF; ) .radio_text:after ( conținut: „”; poziție: absolut; sus: 1px; stânga: 4px; lățime: 16px; înălțime: 16px; chenar-rază: 50%; fundal: #9FD468; box-shadow: inserat 0 1px 1px rgba(0, 0,0,.5); opacitate: 0; tranziție: .2s; ) .radio input:bifat + .radio__text:după (opacitate: 1; ) .radio input:focus + .radio__text:before (box-shadow: 0 0 0 3px rgba(255,255,0,.7); )
Stilurile de aici sunt aceleași ca în metoda anterioară, doar că sunt aplicate altor selectoare.
Stil pentru browsere mai vechi
Cod CSS pentru caseta de selectare. În comentariile la cod, am adăugat explicații referitoare la browsere:
/* Mai întâi desemnați stiluri pentru IE8 și versiuni mai vechi, de ex. aici suntem o casetă standard de înnobilare. */ .checkbox ( vertical-align: top; lățime: 17px; înălțime: 17px; margin: 0 3px 0 0; ) /* Aceasta este pentru toate browserele, cu excepția celor foarte vechi care nu acceptă selectoare plus. Arătăm că eticheta se poate face clic. */ .checkbox + label (cursor: pointer; ) /* Urmează stilul casetei de selectare în browserele moderne, precum și în IE9 și mai sus. Datorită faptului că browserele mai vechi nu acceptă selectoarele :not și :checked, toate stilurile următoare nu vor funcționa în ele. În acest caz, bifat este specificat fără două puncte în față, din anumite motive funcționează așa. */ .checkbox:not(bifat) ( poziție: absolut; z-index: -1; opacitate: 0; margine: 10px 0 0 20px; ) .checkbox:not(bifat) + etichetă (poziția: relativă; umplutură: 0 0 0 60px; ) .checkbox:not(bifat) + etichetă:before (conținut: „”; poziție: absolut; sus: -4px; stânga: 0; lățime: 50px; înălțime: 26px; chenar-rază: 13px; fundal : #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); tranziție: .2s; ) .checkbox:not(bifat) + label:after (conținut: ""; poziție: absolut ; sus: -2px; stânga: 2px; lățime: 22px; înălțime: 22px; chenar-rază: 10px; fundal: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); tranziție: .2s; ) .checkbox:bifat + etichetă:înainte ( fundal: #9FD468; ) .checkbox:bifat + etichetă:după (stânga: 26px; ) .checkbox:focus + label:înainte (box-shadow: inserție 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); )
Cod CSS pentru butonul radio:
Radio ( aliniere verticală: sus; lățime: 17px; înălțime: 17px; margine: 0 3px 0 0; ) .radio + etichetă ( cursor: indicator; ) .radio:not(bifat) ( poziție: absolut; z-index: -1; opacitate: 0; margine: 10px 0 0 7px; ) .radio:not(bifat) + etichetă (poziție: relativă; umplutură: 0 0 0 35px; ) .radio:not(bifat) + etichetă:înainte ( conținut : ""; poziție: absolut; sus: -3px; stânga: 0; lățime: 22px; înălțime: 22px; chenar: 1px solid #CDD1DA; chenar-rază: 50%; fundal: #FFF; ) .radio:not( bifat) + etichetă: după (conținut: ""; poziție: absolut; sus: 1px; stânga: 4px; lățime: 16px; înălțime: 16px; raza chenar: 50%; fundal: #9FD468; umbră casetă: inserție 0 1px 1px rgba(0,0,0,.5); opacitate: 0; tranziție: .2s; ) .radio:verificat + label:after ( opacitate: 1; ) .radio:focus + label:before (box-shadow : 0 0 0 3px rgba(255,255,0,.7); )
Exemple
Așa se face într-un mod atât de ușor. Mulțumită aceasta metoda, proiectați casete de selectare și butoane radio cu folosind CSS o poți face așa cum vrei.
Vă urez bun venit pe blogul meu, dragi cititori interesați de crearea site-ului web. Astăzi vă voi arăta un truc grozav care vă va permite să creați casete de selectare interesante, care sunt mult mai frumoase decât ofertele html implicite. Îți voi arăta cum se face design css caseta de selectare s. Cu alte cuvinte, vă voi arăta cum css frumos casete de selectare (casete de selectare), adică bife.
Markup inițial
Deci, trebuie să începeți prin a adăuga la cod html, care va afișa casetele noastre de selectare, precum și etichetele pentru acestea (etichetă), aceste câmpuri trebuie să fie legate între ele, astfel încât atunci când faceți clic pe etichetă, să puteți bifa caseta.
Deci, voi comenta puțin. Avem trei perechi: un câmp de casetă de selectare și o etichetă pentru acesta. Fiecare câmp primește propriul său identificator, eticheta este asociată cu atributul for, unde este scris numele identificatorului de asociat. În timp ce totul de pe pagină arată așa, adică este normal aspect casete de selectare. Acum o vom schimba.
Eliminam intrarea, aranjam intervale
Deci, acum trebuie să ascundem casetele de selectare obișnuite din pagină.
Intrare (
afișaj: niciunul;
}
Acum trebuie să aranjam cumva noile câmpuri. Vom stila elementele span, deoarece acestea se află în interiorul etichetei .
Intrare + interval etichetă(
display:inline-block;
lățime: 40px;
margine-dreapta: 10px;
înălțime: 40px;
vertical-align:mijloc;
chenar: 5px verde continuu;
cursor:pointer;
chenar-rază: 5px
}
Cu acest selector am selectat toate intervalele din etichetele care se află în cod imediat după introducerea cu tipul casetei de selectare. Astfel, decorul va fi aplicat pe spatele noastre. Le oferim un tip de linie bloc, o lățime și înălțime specifice și o umplutură la dreapta, astfel încât textul să nu se potrivească perfect.
Făcând totul să funcționeze
Acum trebuie să faceți astfel încât atunci când faceți clic în interiorul intervalului, adică atunci când selectați o opțiune, o bifă să fie pusă automat în ea. Pentru a face acest lucru, am găsit mai întâi pe Internet pictograma corespunzătoare cu o bifă (ar trebui să fie în format png), a redus-o la dimensiunea câmpului nostru. Acum rămâne să introduceți următorul cod:
Intrare: bifat + interval etichetă (
background:url(btn.png) fără repetare;
}
Totul funcționează acum! Încercați să faceți clic și veți vedea că apare o bifă frumoasă când o selectați. Imaginea mea se afla în același folder cu fișierul css și se numea btn.png , de unde și intrarea.
Deci, ce face intrarea noastră magică: bifată + selectorul de etichete? Practic, îi spune browserului următoarele: atunci când oricare dintre casete de selectare este bifată, aplicați pentru intervalele din etichete imagine de fundal. Gata, totul este simplu, ne-am descurcat fără scripturi, făcând casete frumoase pe css pur. Scrieți în comentarii dacă ceva nu este clar.
Un minut de atentie: Cu toții dorim să plasăm site-urile noastre pe o găzduire de încredere. Am analizat sute de gazde și am găsit-o pe cea mai bună - HostIQ Există sute de recenzii pozitive despre acesta în rețea, ratingul mediu al utilizatorilor este de 4,8 din 5. Lasă-ți site-urile să fie bune.
Astăzi vei ști cum se face o casetă de selectare în html si adauga la el css stiluri pentru o mai bună compatibilitate cu designul site-ului.
Demonstrație
Casetă de selectare în HTML
Să creăm un bloc cu patru casete de selectare, prima va fi marcată cu o bifă. Fiecare casetă de selectare va fi înfășurată într-o etichetă eticheta, în care se află câmpul de introducere, textul și elementul span A fi stilizat.
Etichetă eticheta servește ca un container pentru fiecare casetă de selectare, pentru claritate, am setat temporar un chenar roșu etichetei eticheta. Când există puțină experiență, asta mod bun, vedeți limitele oricărei etichete pentru a nu acționa orbește.
CSS pentru caseta de selectare
Etichetă în linie eticheta, înlocuiți cu bloc (afișare: bloc) astfel încât casetele de selectare să stea una sub alta, user-select: niciunul- Împiedică utilizatorul să selecteze un element.
Container(
display:bloc;
user-select: niciunul;
}
Acest cod ascunde stilurile implicite de browser pentru caseta de selectare. Facem elementul complet transparent prin opacitate, lățimeȘi înălţime cu o valoare nulă și în locul lor, setăm stiluri personalizate pentru caseta de selectare.
intrare container (
opacitate: 0
inaltime: 0;
latime: 0;
}
Creați casete de selectare personalizate. Schimbați dimensiunea și culoarea fundalului.
bifează marcajul(
înălțime: 23px;
lățime: 22px;
culoare de fundal: #eec321;
}
Dacă treceți cu mouse-ul, faceți culoarea de fundal puțin mai închisă.
Container:hover input ~ .checkmark (
culoare de fundal: #ccc678;
}
Pentru caseta de selectare bifată, setați o culoare diferită pentru fundal.
Introducere container: bifat ~ .checkmark (
culoare de fundal: #2196f3;
}
Ascunderea casetei de selectare pentru casetele de selectare nebifate prin aplicarea unui pseudo-element după.
bifa:dupa (
continut: "";
poziție: absolută;
afișaj: niciunul;
}
Faceți caseta de selectare vizibilă numai pentru casetele de selectare bifate.
Introducere container:verificat ~ .checkmark:după (
display:bloc;
}
Desenați și stilați bifa. Desenăm o căpușă pe un gol css. Să desenăm un dreptunghi cu margine albă, două laturi ale dreptunghiului nu au margine (lățime zero), obținem un colț dreptunghiular, îl rotim cu 45 de grade și obținem o bifă.
