Stilizarea butoanelor radio și a casetelor de selectare, Ilya Bodrov
bodrovis.tech
Stilizarea butoanelor radio și a casetelor de selectare
În acest articol, vă voi arăta cum puteți stila cu ușurință butoanele radio (casetele radio) și casetele de selectare (casetele de selectare) pe site-ul dvs. folosind HTML și CSS (de data aceasta fără JS).
Datele inițiale
Deci ce avem? Să presupunem că site-ul nostru are un formular care, printre altele, are câteva butoane radio. Ei bine, de exemplu, cu ajutorul lor, utilizatorul alege ce limbaj de programare îi place cel mai mult. Markup-ul va fi obscen de primitiv:
Am omis toate elementele și atributele care nu sunt relevante. Am încadrat imediat fiecare pereche de butoane label-radio în tag-ul .option-group block - în acest fel butoanele radio nu vor fi afișate pe aceeași linie, iar asta ne va ajuta cu stilul. În plus, toate butoanele radio trebuie să aibă aceeași valoare pentru atributul nume, altfel vor aparține unor grupuri diferite și utilizatorul va putea selecta mai multe articole simultan (în timp ce butoanele radio implică faptul că puteți selecta un singur lucru; în caz contrar, noi ar folosi casete de selectare). Și ultimul lucru: pentru fiecare etichetă, am setat atributul for, a cărui valoare se potrivește cu atributul id al butonului radio căruia îi aparține eticheta. Acest lucru se face astfel încât, atunci când faceți clic pe etichetă, valoarea butonului radio corespunzător să se schimbe imediat - acest lucru este mai convenabil pentru utilizator. Iată un formular simplu:
Plan de muncă
Acum să presupunem că site-ul nostru este realizat în culori închise și toate butoanele radio ar trebui să se potrivească organic în el - designerul ne-a trimis deja aspectul necesar. Cum recolorăm aceste elemente în culoarea dorită? Din păcate, instrucțiunile CSS simple, cum ar fi culoarea fundalului, nu te vor duce nicăieri, așa că va trebui să folosești o altă metodă. Din layout-ul trimis de designer, noihaideți să tăiem aspectul butoanelor radio în două stări - normal și apăsat (poate fi și altele, dar ne vom limita la acestea). Vom ascunde apoi butoanele radio de design implicit, dar le vom lăsa în același loc, astfel încât utilizatorul să poată face clic pe ele. În continuare, vom pune imaginea pe care tocmai am decupat-o din aspect ca imagine de fundal sub fiecare buton radio ascuns; in functie de starea butonului, vom schimba imaginea de fundal.
Pare să nu fie nimic complicat, dar aici apar două întrebări. În primul rând: pentru ce element ar trebui setată imaginea de fundal? Este puțin probabil că vom putea face acest lucru pentru butonul radio în sine! În al doilea rând, cum îi spunem CSS când să schimbăm imaginile de fundal?
Am ascuns butonul radio, am plasat o etichetă sub el și am setat o imagine de fundal, dar nu am lăsat indentată eticheta.
Prima întrebare este destul de simplă. Într-adevăr, este imposibil să setați o imagine de fundal pentru butonul radio în sine, dar avem etichete! Tot ce trebuie să faceți este să indentați fiecare etichetă în stânga suficient pentru a se potrivi cu butonul nostru radio „fals” (adică desenat) și să suprapuneți imaginea de fundal în așa fel încât să fie situată în stânga și să nu fie duplicată de-a lungul întreaga lungime a etichetei. Aici va trebui să ajustați puțin cu poziționarea elementelor (în special, asigurați-vă că eticheta este plasată direct sub butonul radio real), dar, în principiu, nu este nimic complicat în acest sens.
Și acum am adăugat umplutură la stânga (este violet umbrit; eticheta în sine este cyan), astfel încât textul să nu se suprapună pe fundal.
Uită-te la poze pentru a vedea cum va arăta. Aici am lăsat în mod deliberat culoarea de fundal albă, astfel încât imaginea de fundal a etichetelor să iasă clar în evidență. Prima figură arată astabutonul radio este ascuns, imaginea de fundal este suprapusă, dar nu există indentație în stânga și din această cauză, textul etichetei se strecoară în el. În a doua figură, această problemă este remediată și se pare că nu este o imagine de fundal, ci un buton radio real.
Acum la a doua întrebare. Pentru a scrie un stil CSS care indică doar butonul radio care a fost bifat de utilizator, folosim pseudoselectorul :checked (care funcționează și pentru casetele de selectare), așa că scrierea input[type='radio']:checked înseamnă: selectați doar butonul radio care este bifat. Totuși, nu avem nevoie de butonul radio în sine, ci de eticheta corespunzătoare acestuia, deoarece îi setăm imaginea de fundal! Pentru a face acest lucru, folosim selectorul CSS + astfel: input[type='radio']:checked + label. Această intrare înseamnă că trebuie să selectați eticheta care se află imediat după butonul radio bifat de utilizator, iar eticheta trebuie să fie la același nivel de imbricare. Deci vom rezolva problema. Să trecem la implementare.
În aspectul trimis, butoanele radio au lățimea și înălțimea de 17px, culoarea de fundal a paginii este #363636. De asemenea, vom seta mici indentații pentru pagină, astfel încât forma să nu se lipească chiar de margine. Iată ce se întâmplă:
În cea mai mare parte, nu există aproape nicio surpriză aici. Cu opacitate: 0; ascundem butoanele radio, apoi setăm lățimea dorită și neapărat z-indexul astfel încât butonul radio să fie deasupra etichetei și să poată fi apăsat (deși este invizibil). Trebuie să ne amintim și despre poziție: relativ;, altfel z-index nu va funcționa. În continuare, vom stila etichetele. Asigurați-vă că setați padding-left, astfel încât să existe suficient spațiu pentru imaginea de fundal (care va reprezenta butonul radio) și că textul etichetei nu este prea aproape - pentru cazul dvs., aceste valori, desigur, pot fialții. Apoi, poziționăm și etichetele relativ, le mutăm spre stânga cu stânga, astfel încât să fie sub butoanele radio invizibile, apoi schimbăm culorile și dimensiunea fontului. Asta pare să fie, dar care este stilul pentru input[type='radio']:checked + label? Care este această poziție de fundal?
În acest caz, folosim ceea ce se numește sprite pentru imaginea de fundal. Am putea face acest lucru într-un mod simplu - specificați o imagine de fundal pentru toate etichetele și alta pentru eticheta care vine după butonul radio bifat, dar în acest caz, utilizatorii ar observa o mică întârziere după ce făceau clic pe butonul radio. Ar apărea foarte simplu: utilizatorul a dat clic pe butonul radio, iar starea sa vizuală s-ar schimba în jumătate de secundă (dați sau primiți). Acest lucru se datorează faptului că la primul clic, browserul încarcă mai întâi imaginea de fundal care este setată pentru starea apăsată și abia apoi o afișează (desigur, această imagine necesită timp pentru a se încărca, deși puțin). Prin urmare, acum pe multe site-uri, imaginile sunt combinate în sprite-uri. Un sprite este un desen mare care constă din mai multe imagini. Browserul îl încarcă imediat și apoi afișează diferite părți ale acestuia pentru fundalul diferitelor elemente. Deschideți acest link - veți vedea sprite-ul pe care îl folosim în acest caz. Este format din două imagini: un buton radio apăsat și unul neapăsat. Înălțimea sa este de 34 px (în mod evident, înălțimea fiecărei imagini individuale este de 17 px). Acest sprite poate fi gândit ca o panglică pe care o putem derula în sus și în jos și să arătăm partea dorită într-o „fereastră” de dimensiunea dorită. Eticheta noastră va acționa ca o fereastră, a cărei înălțime este de 17 px, adică exact o imagine din sprite se va potrivi în ea - trebuie doar să setăm „panglica” la nivelul dorit.poziţie. Vezi desenul care ilustrează ceea ce este scris.
Albastrul marchează imaginea de fundal (sprite), pe care o deplasăm în sus și în jos cu poziția de fundal; roșu - un element de dimensiune fixă pentru care este setată o imagine de fundal.
Deci, iată declarația de fundal: url('https://s3-eu-west-1.amazonaws.com/radiantwind/js_css/radio_sprite.png') transparent no-repeat 0 -18px; spune că sprite-ul nostru ar trebui să fie folosit ca imagine de fundal, în timp ce culoarea de fundal ar trebui să fie transparentă, sprite-ul nu ar trebui să ascundă blocul nostru dacă lățimea sa nu este suficientă pentru a-l acoperi complet și că imaginea ar trebui să fie afișată din punctul 0px; 0px, adică din partea de sus (numărând de la marginea din stânga sus; inițial browserul încearcă să afișeze partea de jos a imaginii, așa că trebuie să trecem în sus cu 18px). 0 -18px sunt coordonatele x și y. Deoarece panglica noastră se extinde în înălțime, setăm doar offset-ul y fără a atinge x. Priviți din nou sprite-ul nostru și totul va cădea la loc: în partea de sus este doar o imagine a butonului radio în stare normală, iar dedesubt - în starea apăsată. De aceea urmează instrucțiunea poziția de fundal: 0 0; care afișează un fundal diferit pentru butonul radio pe care l-ai făcut clic, dintr-o altă parte a sprite-ului. Am putea copia întreaga declarație de fundal de mai sus și modifica coordonatele offset din ea, dar acest lucru nu este necesar - notația poate fi simplificată.
Există servicii online pe Internet care convertesc imaginile încărcate într-un singur sprite și chiar creează stilurile corecte (deci nu trebuie să ajustați offset-ul manual). Iar pentru Ruby on Rails, există biblioteca compas-rails, care poate face sprite-uri pe server.
Și ultimul moment înainte să ne uităm la rezultatmunca noastra. Trebuie să ne ferim de situația în care browserul nu știe cum să facă față pseudo-selectorilor precum :checked (cum ar fi IE 6 sau 7). Pentru a face acest lucru, schimbați stilurile în acest fel:
Totul a rămas neschimbat, cu excepția faptului că am adăugat .option-group:not(#foo) > . Această intrare spune că stilurile ar trebui aplicate numai obiectelor care sunt imbricate direct în .option-group și că .option-group nu ar trebui să aibă id-ul #foo. Este clar că nu avem un astfel de identificator, această condiție se transformă întotdeauna în adevărată, așa că toate browserele moderne vor aplica întotdeauna aceste stiluri. Browserele care nu știu ce sunt :not (și :checked), totuși, vor sări peste aceste instrucțiuni, lăsând astfel butoanele radio standard neschimbate - se pare că am adăugat compatibilitatea cu versiunea inversă. Și, în sfârșit, iată rezultatul final:
Albastrul indică un buton radio ascuns, situat exact sub imaginea de fundal a etichetei.
Atenție la imagine: butonul nostru radio real, ascuns, este marcat cu albastru, care se află exact sub imaginea de fundal a etichetei noastre - în acest fel, „înșelăm” utilizatorul și obținem rezultatul dorit. În același timp, dacă browserul nu știe cum să lucreze cu pseudo-selectori, pur și simplu nu va aplica stilurile asociate cu ascunderea butoanelor radio și setarea unei noi imagini de fundal pentru etichete, iar utilizatorul va putea, de asemenea, să lucreze cu forma.
Așa am reușit să stilăm butoanele radio (și, sperăm, casetele de selectare) pentru site-ul nostru. Această abordare este bună deoarece nu necesită scrierea niciunui script, iar stilurile folosite sunt destul de simple. Dezavantajul său este că browserele mai vechi nu știu să lucreze cu pseudo-selectoarele folosite, deși pentru acest caz am implementatcompatibilitate inversă. Această abordare nu este singura - alte modalități de rezolvare a acestei probleme sunt descrise pe Internet, folosind adesea scripturi. Încercați mai multe opțiuni și decideți care dintre ele funcționează cel mai bine pentru dvs.
Succes, ne vedem în postările următoare!