Šiame vadove sužinosi kaip individualiai pritaikyti checkbox dizainą savo interneto formose. Checkboxai dažnai nėra tokie patrauklūs, kaip norėtumėte, ir gali nesiderinti su jūsų spalvų schema ar teminiu dizainu. Standartiniai checkboxo dizainai sunkiai keičiami, tačiau yra įvairių būdų, kaip pritaikyti išvaizdą, kad ji geriau tiktų jūsų svetainei.
Tikslas ne tik sukurti patrauklų dizainą, bet taip pat išlaikyti checkbox funkcionalumą. Šiame vadove paaiškinu žingsnis po žingsnio, kaip stilizuoti checkbox'us.
Svarbiausios išvados
- Galite pritaikyti checkboxo išvaizdą naudodamiesi CSS, paslepę numatytąjį formą ir sukurdami pasirinktinį elementą.
- Naudokite CSS seudonimines klases norėdami paryškinti įjungto ir išjungto checkboxo skirtingumus.
- Taip pat galite naudoti Unicode simbolius ar vaizdus, kad sukurtumėte patrauklesnį checkboxą.
Žingsnis-po-žingsnio vadovas
Žingsnis 1: Sukurkite pirmąjį checkbox'ą
Pirmiausiai sukurti paprastą checkbox'ą savo HTML dokumente. Checkbox'as numatytaisiais yra mėlynas, tai bus jūsų kūrimo pagrindas.
Žingsnis 2: Prisitaikyti foninę spalvą
Prisitaikyti checkboxą prie jūsų poreikių galite keisdami fono spalvą. Galite naudoti CSS savybę vadinamą accent-color, kad nustatytumėte naują spalvą. Pavyzdžiui, nustatykite ją į raudoną, kad pamatytumėte, kokį pokytį tai sukelia.
Žingsnis 3: Prisitaikyti checkboxo dydį
Be spalvos, galite taip pat pakeisti checkboxo dydį. Didžesnis checkboxas gali geriau atrodyti jūsų dizaine ir palengvinti sąveiką su juo. Tai galima padaryti CSS pagalba.
Žingsnis 4: Checkbox pakeisti savo elementu
Jei numatytasis pažymėjimas jums neatitinka, pakeiskite checkboxą savo elementu. Tai padarysite paslėpdami natyvinį input elementą ir naudodami vietoje to span, kurį pritaikote. Iš pradžių pašalinkite checkbox'o stilių.
Žingsnis 5: Prieš numatomą būseną
Dabar pridėkite span elementą, kuris parodytų dėžutę checkbox'e. Nustatykite dėžutės plotį ir aukštį, baltą rėmo spalvą ir užtikrinkite, kad dešiniajame atstume būtų atitinkamai, kad nebūtų sąveikos su kitais elementais.
Žingsnis 6: Prieš įjungtos būsenos stilizavimas
Norėdami pakeisti įjungto checkboxo dizainą, turite naudoti CSS pseidonimines klases. Kai pažymėjimas patikrintas, galite pakeisti span elementą. Nurodykite :checked selektor, kad nurodytumėte, kas turi įvykti su dėžute įjungtoje būsenoje. Naudojama input:checked + .box ir keičiama fono spalva.
Žingsnis 7: Unicode simboliai pažymėjimui
Vietoj spalvingos dėžutės galite pridėti pažymėjimą. Naudokite Unicode simbolį pažymėjimui ir jį įdėkite į span. Norėdami tai padaryti naudokite ::po-Pseudoelementą pažymėjimui pridėti ir jį tinkamai stilizuoti naudodami CSS.
Žingsnis 8: Smulkūs deriniai
Žingsnis 9: Naudokite alternatyvas rodymui
Vietoj įprastos žymeklio galite naudoti nuotraukas, kurios leidžia stiliuoti. Galite įterpti vieną paveikslėlį, kai žymeklis yra įjungtas, ir kitą paveikslėlį, kai jis yra išjungtas.
Žingsnis 10: Patikrinkite veikimą
Pasitikrinkite, kad žymeklio funkcionalumas išliktų net po stiliavimo. Būtina užtikrinti, kad tiek input elemento matomumas, tiek sąveikumas išliktų, net jei jis yra vizualiai paslėptas.
Apibendrinimas
Šiame vadove išmokote, kaip pritaikyti žymeklius savo internetiniuose formose. Naudodamiesi CSS pseudoklasėmis, galite pakeisti žymeklio dizainą, padarydami įprastą žymeklį nematomą ir vietoj to rodydami savo elementus. Naudoti Unicode simbolius ir nuotraukas suteikia daug kūrybinių galimybių.
Daugiausiai užduodamų klausimų
Kaip galiu pakeisti žymeklio spalvą?Gali naudoti accent-color-CSS atributą, kad pakeistum išjungto būsenos fono spalvą.
Ar galiu naudoti nuotraukas vietoj simbolių?Taip, gali naudoti nuotraukas žymeklių būsenoms nurodyti, rodydamas jas span elementuose.
Ar turiu palikti matomą input elementą?Ne, jį galima padaryti nematomu, tačiau funkcionalumas turi išlikti, pasinaudojus labeliais arba span elementais sąveikai.
