Accentsconagua
Share
V-ați întrebat vreodată cum să bifați casetele de selectare și butoanele radio, dar fără JavaScript? Mulțumită CSS3 poți! Iată ce vom construi (Notă: pentru a învăța cum să le faceți accesibile, consultați și acest tutorial):
Dacă sunteți în căutarea unor elemente grafice pe care să le utilizați cu elementele UI ale formularului, consultați kiturile UI disponibile de la Envato Elements. În caz contrar, apucați o ceașcă de cafea și începeți cu acest tutorial!
Literatura recomandată: Cele 30 de selecții CSS pe care trebuie să le memori
Pentru cei care vă simțiți încrezători deja în abilitățile dvs. CSS și doriți doar un indiciu în direcția corectă, aici este cea mai importantă linie de CSS din întregul tutorial:
introduceți [type = "checkbox"]: verificat + etichetă
Acum, pentru aceia dintre voi care simt că aveți nevoie de mai multă îndrumare, nu vă temeți, citiți mai departe!
Bine, așa că înapoi pe subiect acum. Ce anume vom face? Ei bine, datorită micului CSS3 mic : verificat pseudo-selector, putem direcționa un element pe baza stării sale verificate (sau neschimbate). Putem folosi apoi + adiționalul selector de frate din CSS2.1 pentru a viza elementul urmând direct caseta de selectare sau radio, care în cazul nostru este eticheta.
Acum, începem prin crearea fișierelor noastre HTML și CSS (sau oricum preferați să vă manipulați stilurile) și puteți ajunge la lucru. Voi presupune că știi cum să faci asta, deci nu va trebui să intrăm în asta.
În scopul de a vă obține în drum, voi demonstra această tehnică numai într-o casetă de selectare, dar procesul pentru butoanele radio este identic și este inclus în sursă.
Bine, să începem de fapt, atunci? Începem prin crearea intrării casetei de selectare, urmată de o etichetă.
Acum, doar în cazul în care nu știți prea multe despre element, trebuie să conectați intrarea și eticheta pentru a interacționa cu intrarea prin etichetă. Acest lucru se face prin utilizarea, pentru = „“ și ID-ul intrărilor.
De asemenea, voi adăuga a în interiorul etichetei, care este o preferință mai personală decât orice altceva, dar totul va deveni clar în pasul 3.
Aici începe distracția. Primul lucru pe care îl facem, care este baza acestui tutorial întreg, este ascunderea căsuței de validare.
introduceți [type = "checkbox"] display: none;
Acum, că sa făcut acest lucru, putem să stilizăm eticheta, dar mai precis în interiorul etichetei. Fac acest lucru pentru a mă controla mai mult poziția exactă a casetei. Fără aceasta probabil că veți folosi direct o imagine de fundal în etichetă și poziționarea poate deveni dificilă.
introduceți [type = "checkbox"] display: none; introduceți [type = "checkbox"] + spațiu etichetă display: inline-block; lățime: 19px; înălțime: 19px; fundal: url (check_radio_sheet.png) stânga sus no-repeat;
Bine, lasă-mă să explic asta repede. În primul rând, observați fundalul. Am o foaie mică de sprite pentru acestea, deci tot ce trebuie să fac este să-mi fixez poziția de fundal în acest interval. Spanul în sine este lățimea exactă și înălțimea fiecărui "sprite" din foaie, ceea ce face ușor definirea fiecărei stări.
Foaia noastră de sprite Iată restul CSS, specific stilului meu. Acest lucru este pur și simplu pentru estetică și specific fie pentru gustul meu sau pentru acest design.
introduceți [type = "checkbox"] display: none; introduceți [type = "checkbox"] + spațiu etichetă display: inline-block; lățime: 19px; înălțime: 19px; marcă: -2px 10px 0 0; vertical-align: middle; fundal: url (check_radio_sheet.png) stânga sus no-repeat; cursor: pointer;
Nu mai este prea multă muncă, așa că să lăsăm asta înfășurată. Ultimul lucru pe care trebuie să-l faceți este să oferiți o stare pentru element atunci când intrarea este verificată și opțional, de asemenea, pentru a trece pe hover. Acest lucru este destul de simplu, aruncați o privire!
introduceți [type = "checkbox"] display: none; introduceți [type = "checkbox"] + spațiu etichetă display: inline-block; lățime: 19px; înălțime: 19px; marcă: -2px 10px 0 0; vertical-align: middle; fundal: url (check_radio_sheet.png) stânga sus no-repeat; cursor: pointer; introduceți [type = "checkbox"]: verificați + eticheta span background: url (check_radio_sheet.png) -19px top no-repeat;
Observați că pentru că am folosit o foaie de sprite, tot ce trebuie să fac este să schimb pozitia de fundal. De asemenea, observați că tot ceea ce trebuia să fac pentru a modela eticheta pentru că atunci când verificați o casetă de selectare / buton radio era să folosiți CSS3 : verificat pseudo selector.
Pseudo-selectorii au un mare sprijin în toate browserele, dar se aplică prescripțiile obișnuite, iar fundașul este destul de grațios:
Pot folosi datele pentru pseudo selectorii generali
Fallback: IE9 pe Windows 7 Mobile browserele mobile sunt, de asemenea, o problemă : verificat este neclar. Mobile Safari pentru iOS 6 nu susține-o, de exemplu.
Bine, așa că am terminat, nu? Ei bine, hai să verificăm. Mai întâi codul HTML:
Arată a ta la fel? Nu uitați să adăugați acest lucru ! Atunci când experimentați acest lucru pe cont propriu, vă sugerăm să găsiți modalități noi sau diferite de a face această parte. Mi-ar plăcea să văd ce vă propuneți pentru ao face mai eficientă. Acum pentru CSS:
introduceți [type = "checkbox"] display: none; introduceți [type = "checkbox"] + spațiu etichetă display: inline-block; lățime: 19px; înălțime: 19px; marcă: -2px 10px 0 0; vertical-align: middle; fundal: url (check_radio_sheet.png) stânga sus no-repeat; cursor: pointer; introduceți [type = "checkbox"]: verificați + eticheta span background: url (check_radio_sheet.png) -19px top no-repeat;
Totul este prezent? Perfect. Rețineți că o mulțime de acest stil este specific stilului pe care l-am creat pentru fișierele demo. Vă încurajez să vă creați propria dvs. și experimentați cu plasarea și prezentarea.
În concluzie, cel mai important lucru pe care l-ați putea îndepărta de la acest lucru este prima linie a CSS pe care am scris-o chiar la început:
introduceți [type = "checkbox"]: verificat + etichetă
Folosind acest lucru, puteți crea o întreagă varietate de lucruri diferite. Posibilitățile cu : verificat treceți dincolo de casetele de selectare și radiourile pentru a fi utilizate în formulare, dar vă las să experimentați cu asta singur. Unele lucruri de experimentat:
Sper că v-ați bucurat de acest scurt articol și sper să luați ceea ce vedeți aici și să vă extindeți sau să vă îmbunătățiți!
Pentru a termina, am construit un ghid complet pentru a vă ajuta să învățați CSS, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat.
