Custom Site Theme Picker Tutorial #8 - Checkbox CSS

Key Takeaways

lesson number eight is all about CSS for these check boxes right here we want to take it from looking like this to looking like this right here so we can do that in a bunch of different ways but what we're going to do is actually remove the default check boxes from visibility but then use their functionality and update a visual thing instead so we're going to do this in two stages first of all I'm going to add some HTML to these right here these check boxes and then secondly we'll spend the rest of our time in CSS now what I'm going to do is use a sibling selector to say whenever this is checked I then want you to toggle on or off a kind of custom checkbox we're going to create now we will call that switch right here it'll just be a div and inside here we'll have a span in this case this will say sound off and then we'll also have a sound on and in between these two we'll have another div with the class of thumb now we're not going to interact with these at all so we're going to actually put pointer events To None here so you can't even click on them or anything like that so it's only visual in this case that's why it doesn't matter if it's a div normally if you like use a div and you want to to be clickable you that should really be a button or you know whatever so in this case though this is just basically like a UI layer on top that you're not going to actually interact with you're actually clicking on the input and this is just going to update to visually show you what's going on so let's do the same thing down here so I'm going to go ahead and grab this down this way and this will just say motion on or off and then one more time and this will just say down here squared and rounded so I think that's what I had over here let's just double check yeah Square it in rounded okay so now we've got the showing right here the check box itself isn't showing this thumb isn't yet but we'll do all that in the CSS so next let's go ahead and open up our CSS file I'm going to scroll down to the bottom and we've been a little lacks and how we've styled this stuff because we've tried to focus on functionality I actually do need to add one other thing here if I go to settings and grab my H2 inside of here then I actually want to set this custom site settings to our custom color so I can just set the color here to the VAR of custom color and now whatever my custom color is it will update this as well so if I come down here I have like an option two option one let's see that should work oh you know what this needs to be a settings wrapper because I think that's outside the settings itself so this should be settings wrapper the H2 now it actually picks up that color so I meant to do that earlier just never got around to it way back when when we made these check boxes to start with we added them inside of a switch wrapper class we've yet to do anything with that but you might remember that I want this to be positioned apps salute and fill the entire switch wrapper class which means the switch wrapper essentially just needs to be position of relative so let's close down the Javascript file come in here we're going to grab that switch wrapper class and I'm going to add a position of relative so now when we have the position absolute checkbox inside of that you'll see that it basically fills that entire section so the other thing we want to do is actually hide the input from the UI and we're going to hide this label as well just to make it a little bit cleaner since we were adding these custom ones right here however with screen readers it will read toggle motion basically to checked or not checked or whatever so let's go ahead and come over here and here I want to grab the type of checkbox I want to do a few things here first of all I want to position absolute this like we've been talking about to make it fill the entire section then I can do that with an inset property which is the same as saying top right left and bottom telling it to fill the entire section I also want to make sure that I have a cursor of pointer here so that when I come over here it looks like I'm toggling you know can actually toggle it one way or the other and then finally eventually I'm going to add an opacity of zero if I do that right now it's going to make it disappear but just to show you here let's uh let's come inside the switch wrapper and do like background color of red so this entire section is being filled by this checkbox itself so over here if I click it's actually actually clicking the checkbox now the way the UI Works in Chrome at least it won't stretch this checkbox box it always keeps it at an aspect ratio of one to one but it is actually filling this entire area so anywhere in this we'll actually check it one way or the other just to kind of see what it's doing so we're going to go ahead and remove this just know that that's well maybe let's keep it on just so you can see it but know that it is behind everything else and maybe now that I think about it let's keep this background color on as well all right so let's come now below here and I want to grab my switch label if I jump over to my HTML that's what a class I want to add on all of these so class we're going to call this switch label we're going to use this to essentially hide the label from the UI as well so all three of these will have switch label and inside here we're going to do something very similar I'm going to say position of absolute I'll say inset of 0 and I'll say opacity of zero eventually so we'll hide that from the UI now anywhere inside here we'll click on this now for whatever reason when you do this now it goes over the checkbox just because it's second in the Dom so you can handle this in a couple different ways so we can say pointer events of none which means they can't actually click on it which now I'm clicking on the check box below the other thing I can do is also just do a cursor a pointer here as well the reason you actually move this to position absolute is for whatever reason at least for me on iOS if you don't have this label clickable it doesn't handle this checkbox well so maybe I'm just doing something wrong but that's at least what I found to work so because these are the exact same I can't actually grab this and just duplicate this right here so I can see if it's either checkbox or the switch label do this and it will basically hide it below so now I've got this UI which is the UI I want but the functionality is the checkbox below so let's come back over here and look at what else we've got so we've got a switch we've also got these two spans we've got the thumb so let's go to the final site what I want is these to be set side by side so like Flex children and then inside here we're going to have this little fake checkbox box that we're going to use the before or after pseudo element for the thumb itself so let's come over here and the next thing I want to do is grab my switch like I said we want this to be display of flex so we're going to use one of our spacing items here space we're going to use 2x small then we're going to line items Center this makes sure that they're vertically aligned one way or the other and let's come back over here so we can actually see what's going on next I want to justify content space evenly so now I've got three things this the check box which is in the middle and then the other span over this way we're going to add a padding around everything and this will be space of extra small and then I am going to add a border here this will be two pixels solid VAR custom color so it'll pick up our custom color which means now I can also get rid of this nasty red and you should be able to see the border that we want on that now because I want it to be rounded if we want rounded so like you can see the rest of the UI is rounded right now I'm going to add a border radius and you might remember the way we set that up is we pointed everything to our radius thing so that would either be rounded full or rounded medium and then we let the UI setting determine basically if it should be really rounded or just zero for the rounded the Border radius and then finally like I mentioned we actually want pointer events To None here so that nothing gets clicked on so nothing in this switch div is being clicked at all this label the check itself isn't actually being checked it's just clicking the check box below or the the label below now the last thing I want to do is set the background color here and this will be my VAR background this just ensures that if it's basically over this background thing that you can still see it so it won't just be transparent it'll actually have that same white background color or whatever the background color happens to be next I want to come in here and grab my switch and inside the switch we have what are called thumbs all right so if I jump back over here to the HTML it's this right here we're grabbing so the little fake check box now I want to style that now there's a couple different ways to do this but I'm going to use CSS variables again and just set a size declaration so that one little change will basically change what this checkbox looks like because this key and Shrink or flex and I don't want it to ever shrink I always want it to take up its full width that it needs I also need to set a flex shrink to zero here and I'll try to remember to show you how that works if you don't do that now inside the thumb we're going to have a before pseudo element which will be the little toggle so this needs to be a position of relative to make sure that it doesn't break outside of its parent container of the thumb now for the width I want to set this to my VAR of size this is that locally scoped variable here and so we can actually see what's going on let's go ahead and add a background color and here once again I'm going to use my custom color just so we can see it used more throughout now I need to set a height and so that that one size variable controls everything let's calculate the height so I use the calc function and pass it my variable size divided by two so there it is right there this width is that three rim and this is 1 0.5 Ram which is half of the the variable size next let's actually grab this border radius property and drop this down here as well and now let's set up our little thumb so I'll come in here and I'm going to grab let's just keep it with switch and thumb we could obviously not do this switch as well just to make it not as specific maybe you want to do that but I'm going to grab the before pseudo element you always need content on these so I'm going to set the content as nothing because I don't need anything here but the position will be absolute because again I want this to be position absolute within its parent container of thumb now let's go ahead and set the width and the height and here I'm going to do something very similar to right here I want it to be a perfect square or a perfect circle but I do want it to be a little bit smaller so we're going to set this like that and that way we can kind of be a little bit smaller than the actual parent itself to make sure we can see it let's set the background color here to our VAR background and now there it is right there so it's at the top left which is default for position absolute so let's actually position this where we want it we want to be down 50 percent that brings the top of it to the middle here we'll have to actually transform it back up where we want it to go so let's go and do that too so we'll say transform translate in this case I want it to be zero left and right and negative 50 up and down like that okay so now it's in the exact middle and now I want to set it off from the left a certain amount so once again I'm going to actually calculate that so that as I change the value of the size I don't have to also come down here and change this so if I calculate it I'm going to actually take the size and here I'm going to divide by 12. now without getting too fancy into the math basically I'm thinking about the size of this thumb itself and the entire size here and dividing it by 12 should set it off basically the exact same amount as the the bottom and the top as well I think I've still got that border radius on my clipboard so let's add that as well so now it's also receiving that same rounding effect now that I think about it I think this and this both need to be full there we go okay so now they actually look full so they're fully rounded now this one looked fully rounded just because it was so small so that radius of you know half a rim actually rounded the entire thing but that's not always going to be the case and finally I want to add a transition on here because when we check that one weight or the other I wanted to have that kind of snapping effect assuming that we want the actual movement to be turned on this will be on the transform property because that's how we're going to animate this we'll do .02 seconds and I've actually got a variable for easing called ease elastic up top declared on the root see if I can find it right here that has a cubic bezier curve so that's all we're going to do is apply that and that way it has that same snapping effect that we see throughout the entire site okay so how do we actually handle clicking this over one way or the other okay well that's where we're going to actually use the checked status of the checkbox because remember that's still controlling the functionality so I'm going to grab the type of check box and say that whenever it's checked what I want to do is grab its General sibling of switch like that and then I want to grab the thumb inside of this and grab the before and transform it so we're going to say transform like this and we'll translate in this case again I'm going to use a calculation so that I don't have to think about handling uh the differences when I change one variable up top here just showing you kind of the power of CSS variables so we can take the variable of size and we can subtract it from the variable of size divided by 2. all right so it's going to actually do this first and then subtract these two things so that will be its left movement and then up top we want to make sure we always keep it at 50 that way it doesn't move down like you just saw do a second ago so now when I check this it's going to move it over this way check it this way and since I'm turning the motion on and off you see that it you know turns the motion on and off but here you can see how it's swapping either way based on this ease elastic right here so because all this is calculated it's really easy to basically swap it over this way basically its size divided by half minus its own size all right so that moves it exactly over where I want it after that little snapping Effect one way or the other now there is one more thing we need to think about and that is we need to know when we focused on it so if I come up here right now if I come over here and I focus on this you don't have any visible you know notion that you focused on it what I can do however is come in here and say when I grab the focus visible so whenever I've tabbed to that I'm going to grab the switch and then just the thumb itself so not the little white thing but the entire section here and I want to add something to it so here or what I want is a box Shadow and I'm going to do this in kind of a ringed stage so we're going to go zero left and right zero up and down zero blur we'll grab three pixels VAR and background and then I'll copy it one more time because you can actually ring a box Shadows like this and here we've got six pixels and I want to set this to my custom color custom color so now if I come in here and I tab to it you see I actually get some indication and I'm checking it now again it looks like this is the check box even though it's not the check box all right so hopefully that makes sense I've turned off the sound in this video just so you don't have to hear it clicking all the time just so you know the other thing I might want to do then is on the thumb itself I might want to also add that same kind of bouncing effect that we had right here so I'm going to grab this and add it on the thumb except in this case I don't want it on the transform I want it on the box shadow so now if I come in here and I you know jump to these with my Tab Key you get all that nice clicky feel unless I toggle motion off in which case you don't get it at all okay so that's all there is to setting up your own custom check boxes that look like toggle switches back and forth again the functionality is the actual checkbox which means you get all the keyboard accessibility all the you know the great accessibility for screen readers and other things like that however you get all the coolness of an actual UI that you like to look at now let me show you what this sounds like if I were to turn on my accessibility settings I can do that in Mac with command and function in F5 I don't think you're actually going to hear this but you can see right here what I'm doing all right so if I come in here you see it says toggle round checked checkbox so it actually says it's checked if I check it it says unchecked toggle round checkbox now I don't think you're actually hearing that audio because I didn't think to capture that when I created this video but you can read what it's saying right here which means you can listen to me instead of trying to decipher between me and my computer voice well hopefully that makes sense kind of why we did what we did the actual label itself toggle round is what's being read off whether it's checked or not is being read off the screen readers but for sighted viewers of your site they're actually seeing if it's squared or rounded or motion off or motion on so we kind of get the best of both worlds with our own custom thing but using the actual browsers checkbox by default as far as the functionality all right in the next video we're going to do the same thing except we're going to focus on these down here these radio groups all right I'll see you in lesson number nine