Orei bune din timpul zilei. 🙂
O astfel de casetă de selectare elegantă este realizată utilizând pseudo-selectori: verificați și: nu. În esență, vom emula funcționarea casetei de selectare și caseta de selectare va deveni invizibilă.
În primul rând, trebuie să determinați caseta de selectare, pe care o modificați. Dacă este vorba de toate casetele de selectare de pe site, atunci trebuie doar să adăugați stilurile la clasa de casete de selectare, care vor fi afișate în exemplu. În general, veți avea o casetă de selectare și va trebui să aibă câțiva parametri necesari. De exemplu, aveți acest cod:
Trebuie să o modificați și să o faceți așa:
Să analizăm parametrii necesari pentru:
- class = check - adăugați o clasă astfel încât toate casetele de selectare în care această clasă să aibă o vizualizare modificată.
- id = newchec - adăugăm idi, pentru a lega o casetă de selectare în caseta de selectare. În mod similar, dacă trebuie doar să selectați o casetă de selectare, nu puteți adăuga o clasă, dar puteți scrie stiluri pentru acest idi. Firește, atât clasa cât și ideea pot avea orice nume.
- eticheta - a doua linie, care este responsabilă pentru afișarea etichetei în caseta de selectare. Prezența sa este obligatorie. Chiar dacă nu aveți nevoie de o etichetă, atunci trebuie să adăugați o etichetă, chiar și una goală.
- pentru = newchec - identificatorul elementului cu care doriți să comunicați. În cazurile noastre, acesta este caseta de selectare. După cum înțelegeți, valoarea pentru trebuie să se potrivească cu id-ul casetei noastre.
Dacă ați creat corect caseta de validare modificată în viitor, puteți trece la cel mai important lucru - adăugând stiluri CSS la caseta de selectare. În cazurile noastre, vom adăuga stiluri pentru clasa de verificare. pe care l-am atribuit casetei noastre.
Deschideți foaia de stil și adăugați următoarea bucată de cod:
Pentru cei care înțeleg CSS, devine clar după inspecția lui. Ceva complicat nu este aici. Pentru cei care nu sunt încă destul de ușor de înțeles, voi semna un pic. Nu voi învăța CSS aici, sunt prea leneș să pictez fiecare parametru, pentru că există cărți despre CSS.
Primul pas este să setați stilurile pentru versiunile mai vechi ale browserului IE. Există doar o căsuță de calibrare standard.
Faceți clic pe eticheta noastră. Când treceți peste el, veți vedea o mână în locul unei săgeți.
Apoi începem să ne actualizăm caseta de selectare. Facem căsuța noastră regulată invizibilă.
Am plasat noua casetă de selectare în funcție de eticheta noastră
Setați căsuța de vizualizare pentru persoanele dezactivate când glisorul din stânga și fundal este gri.
Acesta este aspectul glisorului nostru rotund.
Culoarea de fundal când glisorul este în partea dreaptă, adică caseta de selectare este activată.
Reglați distanța până la cât va deplasa cursorul când se va activa caseta de selectare.
Am aplicat acest parametru în a treia casetă de selectare. Setează umbra când se concentrează pe caseta de selectare. Nu puteți să-l adăugați, atunci va fi ca al doilea.
Firește, poți schimba totul în felul tău. Prin încercare și eroare, potriviți totul așa cum aveți nevoie. Sunt de acord, această casetă de selectare este mult mai plăcută decât cea standard. Dacă ți-a plăcut această metodă, sper că o vei folosi în viitor pe site-ul tău. În următorul articol voi arăta cum să modificați un buton radio rotund printr-o metodă similară.
Asta e tot, vă mulțumesc pentru atenția acordată. 🙂
Dacă ai putea folosi munca mea, poți susține site-ul :)
Bună dragă prietenă
Aveți extensia AdBlock sau altele asemenea. Adăugați site-ul meu pe lista albă și, prin urmare, contribuiți la dezvoltarea acestuia. Instrucțiunea cum să dezactivați AdBlock Vreau aceeași fereastră
Articole similare
Trimiteți-le prietenilor: