Sowhatwewanttodoismakeussothat's positionedexactlyinthecenter, sowe'llusedisplayofflexhereandthen a lineitemscenterinordertocenterthosethingsvertically.
Thisisoneofthestepsthatiscommonlyoverlookedwhencreatingcustomcheckboxesandisincrediblyimportantinordertosupporttabbing, whichisverycommonaswell, a screenreadersforpeoplethathaveproblemsseen.
Thenextthingwewanttodoiscreateournewcheckbox.
I comeinordertodothis.
We'regoingtoselectourlabelelement, andwe'regoingtouse a pseudoelementsLecterofbefore, whichessentiallyadsincontentbeforeourlabel.
Soifweusethebeforeselectorhereandweneedtosupply a contentforanytypeofpseudoelementssuchasbeforeandarecontentisjustgoingtobeblank, sincewedon't wantanythinginsideofhericon.
Andthenwhatwewanttodoiswewanttogiveit a widthand a height.
We'regoingtouseone e m thatwayorcheckboxwillscalewithourfarmsizeandalwaysbethecorrectsize.
Nomatterofourfontisasbig a headingfor a smallisupaircraft.
We'lldothesamethingfortheheightsthatwehave a perfectsquareWhenthenwe'llgiveit a borderheresothatwecanseewhatwe'reworkingwith.
What's finisheddialingupourelementherebyadding a borderradiustoittoslightlyaroundthecorners.
We'lljuststay 0.15 e m againsothatitwillscalewiththesizeofourfund.
Andthenlastly, weuse a marginontherightside 0.5 e m.
Andifwesavedthat, wenowhavecheckboxiconsthatlookverysomewheretothecheckboxthatcomesoverhereinordertoadd a hovereffectoriconorgotonhere, selectourlabel, I willsaywhenwehoveroverourlabel, wewanttochangethebeforeelementofourlabel.
Wewanttogiveit a backgroundcolorhere, andwe'lljustuse a lightgreenbackgroundcolorhere.
Sonowinhere, whatwewanttodoischangethebackgroundcolortobe a slightlydarkergreencolor.
Getthatrighthere.
Sonowifwesavethat, youcouldseewhenwehoverit.
It's thislightgreen, andwecheckit.
It's a slightlydarkergreencolor, whichisperfect, not a workforallofthem.
Andthey'llstaythatwayevenwhenweunsolicitedum, andthenifweuncheckit, you'llseethatthisdarkgreencolorwillgoaway, andit's alreadystartingtoact a lotlike a normalcheckbox.
Next.
Whatwewanttodoisaddinthatactualcheckboxicon, andinordertodothat, wewanttousethecontentsselectorhere, andthatwilltelluswhatcontentdowewanttobeinsideofourelementandwewant a checkmarkicon, andinordertogetthatcheckmarkiconinCSS, allweneedtodoisusethisiconcode, whichis 002714 whichstandsfor a checkmarkicon.
Itscenter, anhourcheckmarkicon, isperfectlyinthecenterofourcheckbox, andthelastthingweneedtodoit's changedourtextcolortobewhitesothat a checkmarkiconwillshowup a littlebitbetterthantheblackicon.
Nowyou'llseeitwhenwegoandusethesecheckboxesnow, allworkexactlyasexpected, Butnormallywhenyouclickon a checkboxbeforereleasing, somethingshouldhappentoshowthatyou'veclickedonit.