Selles juhendis saate teada, kuidas saate märkeruutude disaini oma võrguvormide jaoks individuaalselt kohandada. Märkeruudud pole sageli nii atraktiivsed, kui soovite, ja need ei pruugi sobida teie värvipaleti või teemaga. Märkeruutude vaikimisi kujundusi pole lihtne muuta. Siiski on erinevaid viise välimust kohandada, et see paremini teie veebisaidiga sobituks.
Eesmärk pole mitte ainult atraktiivse disaini saavutamine, vaid ka märkeruudu funktsionaalsuse säilitamine. Selles juhendis selgitan samm-sammult, kuidas saate märkeruute kujundada.
Olulisemad tähelepanekud
- On võimalik kohandada märkeruutude välimust CSS-iga, peites vaikimisi vormi ja luues kohandatud elemendi.
- Aktiveeritud oleku jaoks saate märkeruudu juures kasutada CSS pseudo-klaase, et näidata erinevaid disaine aktiveeritud ja mitteaktiveeritud märkeruudu jaoks.
- Võite kasutada ka Unicode märke või pilte, et kujundada atraktiivsem märkeruut.
Samm-sammult juhend
Samm 1: Esimese märkeruudu loomine
Alustuseks looge lihtne märkeruut oma HTML dokumendis. Vaikimisi on märkeruudul sinine disain. See on alus, millele saate edasi ehitada.
Samm 2: Taustavärvi kohandamine
Märkeruudu vastavusse viimiseks oma vajadustega saate muuta taustavärvi. Saate kasutada CSS-i omadust nimega accent-color, et määrata uus värv. Näiteks seadke see punaseks, et näha, millist muudatust see kaasa toob.
Samm 3: Märkeruudu suuruse kohandamine
Lisaks värvile saate muuta ka märkeruudu suurust. Suurem märkeruut võib teie kujunduses paremini esile tõusta ja muuta selle kasutamise lihtsamaks. Seda saate CSS-i abil kohandada.
Samm 4: Märkeruudu asendamine enda elementiga
Kui vaikimisi märgeteile ei meeldi, asendage märkeruut omaenda elemendiga. Selleks peate peitma vaikeväärtuse sisendi elemendi ja kasutama selle asemel kohandatud spani. Kõigepealt eemaldage stiil märketelt.
Samm 5: Kasti kujundamine tavalises olekus
Nüüd lisage span-element, mis esindab märkeruudu kasti. Määrake kasti laius ja kõrgus, valge raamivärv ning veenduge, et parempoolne vahekaugus oleks õige, et see ei seguneks teiste elementidega.
Samm 6: Aktiveeritud oleku kujundamine
Aktiveeritud märkeruudu disaini muutmiseks peate kasutama CSS-i pseudo-klaase. Kui märkeruut on kontrollitud, saate muuta spani. Kasutage selleks :checked-valijat, et määrata, mis peaks juhtuma kasti aktiveeritud olekus. Selleks kasutage valijat sisend:checked + .box ja muutke taustavärvi.
Samm 7: Unicode märgid märgistamiseks
Ainult värvika kasti asemel saate lisada ka märgistamise märgi. Kasutage märgistamise märgi jaoks Unicode märki ja lisage see spani. Selleks kasutage ::after pseudo-elementi, et märki lisada ja seda CSS-iga kujundada.
Samm 8: Täpsemad kohandused
Hea märgise väljanägemise tagamiseks peate võib-olla reguleerima vahetust ja positsioneerimist. See on eriti oluline, et Unicode märk oleks kastis hästi keskel.
Samm 9: Kasuta esitusviisidena muid võimalusi
Selle asemel, et kasutada märkeruutu, võid kasutada pilte, mis võimaldavad stiilimist. Saad lisada pildi, kui valitud on märkeruut, ja teise pildi, kui see pole valitud.
Samm 10: Kontrolli töökindlust
Veendu, et märkeruudu funktsionaalsus jääb stiilimise järel alles. Pead tagama, et sisendi elementi nähtavus ja interaktiivsus jäävad alles, isegi kui see on visuaalselt peidetud.
Kokkuvõte
Selles juhendis õppisid, kuidas kohandada märkeruute oma veebivormides. CSS-i pseudoklasside abil saad muuta märkeruudu disaini, muutes vaikimisi märkeruudu nähtamatuks ning kuvades oma elemendid. Unicode'i märkide ja piltide kasutamine pakub sulle palju loomingulisi võimalusi.
Korduma kippuvad küsimused
Kuidas saan märkeruudu värvi muuta?Sa saad kasutada accent-color CSS omadust, et muuta taustavärv aktiveeritud olekut muutes.
Kas saan kasutada sümboolikute asemel pilte?Jah, saad kasutada pilte märkeruudu olekute jaoks, kuvades neid span-elementides.
Kas pean jätma sisendi elemendi nähtavaks?Ei, seda saab varjata, kui funktsionaalsus jääb alles, kasutades interaktsiooniks silte või span-elemente.
