Advanced Checkbox Styling s CSS mrežom
CSS modul rasporeda mreže ne samo da može riješiti mamuta problema s rasporedom nego i nekih dobrih starih problema dugo vremena, kao što su stiliziranje oznake potvrdnog okvira.
Iako postoji relativno jednostavan način oblikovanja oznake kad se pojavi nakon potvrdni okvir, nije lako kada se pojavi oznaka prije to.
Styling checkbox bez CSS Grid
Stiliziranje naljepnice nakon potvrdni okvir je nešto što smo programeri radili otkad smo negdje čitali o tome. Ova tehnika je jedan od primarnih i starih primjera snažne dinamike koju CSS može posjedovati.
Evo koda s kojim ste već možda upoznati stilizira oznaku nakon potvrđeni okvir:
ulaz: označeno + oznaka / * stil me * /
stilizirana oznaka nakon potvrdni okvir može izgledati ovako (međutim, možete koristiti i druga pravila stila):
Gornji CSS kod koristi oznaku susjedni sibling kombinator označeno oznakom + ključ. Kada je potvrdni okvir u Isprobali država, element nakon to (obično oznaka) može se stilizirati pomoću ove metode.
Takva jednostavna i učinkovita tehnika! Što bi moglo možda pogriješite s njom? Ništa - sve dok ne želite prikazati oznaku prije potvrdni okvir.
Susjedni kombinator sestara odabire sljedeći element; to znači da oznaka mora doći nakon potvrdni okvir u izvornom HTML kodu.
Dakle, da bi se pojavila oznaka prije pripadajući potvrdni okvir na zaslonu, ne možemo ga samo premjestiti prije potvrdnog okvira u izvornom kodu, kao prethodni sibling selektor ne postoji u CSS-u.
Što ostavlja samo jednu opciju: premještanje potvrdnog okvira i oznake koristeći transformirati ili položaj ili margina ili drugo CSS svojstvo s nekom vrstom telekinetičke snage, tako da se oznaka pojavljuje s lijeve strane okvira za potvrdu na zaslonu.
Problemi s tradicionalnom metodom
Nema ništa majorly nije u redu s navedenom tehnikom, ali može biti u nekim slučajevima neučinkovita. Mislim na slučajeve u kojima preuređene pozicije potvrdnog okvira i oznake više ne funkcioniraju.
Razmislite odgovorno, na primjer. Možda ćete morati promijeniti veličinu ili premjestiti potvrdni okvir prema uređaju na kojem je prikazan. Kada se to dogodi, hoćeš premjestiti oznaku, budući da neće biti automatskog poravnanja s naljepnicom kao odgovor na promjenu položaja / promjenu veličine potvrdnog okvira.
Ovaj nedostatak možemo eliminirati ako možemo pružiti solidan izgled za potvrdni okvir i oznaku, umjesto da ih grubo pozicionirate na stranici.
No, gotovo svi sustavi rasporeda, kao što su tablice ili stupci, zahtijevaju od vas dodajte oznaku prije potvrdnog okvira u izvornom kodu kako bi se na zaslonu pojavio na isti način. To je nešto što ne želimo učiniti jer će sljedeći izbornik elemenata na naljepnici prestati raditi.
S druge strane, CSS Grid je sustav rasporeda koji je ne ovisno o položaju / redoslijedu elemenata u izvornom kodu.
Mogućnosti reorderinga rasporeda mreže namjerno utječu samo vizualni prikaz, ostavljajući govorni poredak i navigaciju na temelju izvornog reda. To omogućuje autorima da manipuliraju vizualnom prezentacijom ostavljajući izvorni poredak netaknut… - CSS Grid Layout Module Level 1, W3C
Tako je CSS mreža idealno rješenje stilizirajte oznaku koja se pojavljuje prije potvrdni okvir.
Styling checkbox s CSS Grid
Počnimo s HTML kodom. Redoslijed potvrdnog okvira i oznake ostat će isti kao i prije. Samo dodamo obje u mrežu.
Popratni CSS je sljedeći:
#cbgrid display: grid; grid-template-područja: "lijevo desno"; širina: 150px; ulaz [type = potvrdni okvir] grid-area: right; oznaka grid-area: left;
Neću ići u dubinu kako CSS mreža radi, kao što sam već napisao detaljan članak o toj temi, koje možete pročitati ovdje. Međutim, neke osnove: prikaz: rešetka svojstvo pretvara element u rešetkasti spremnik, Rešetka-područje identificira područje mreže kojoj element pripada, i rešetke-predloška-područja oblikuje raspored mreže, koji se sastoji od različitih područja mreže.
U gornjem kodu postoje dva područja mreže: "lijevo" i "pravo". Oni izmišljaju dva stupca u retku mreže. Potvrdni okvir pripada "pravo" područje i oznaka "lijevo". Evo kako izgledaju na zaslonu:
Budući da nismo promijenili relativni položaj potvrdnog okvira i oznake u izvornom kodu, možemo i dalje koristiti susjedni kombinator:
ulaz: označeno + oznaka / * stil me * /
Imajte na umu da je stavka mreže uvijek blokiran; pojavljuje se s okolnom kutijom poznatom kao okvir na razini mreže. Ako to ne želite, na primjer za oznaku, stavite omot na tu stavku (omotajte ga u drugi element) i okrenite taj omotač u područje mreže.
To je to, narode. CSS mreža će vam, nadamo se, pomoći pri uklanjanju izgleda tih bezobraznih potvrdnih okvira.
