Write Guy Checkbox with airSlate SignNow

Block out checkbox paper

hello everybody welcome to another CSS challenge video in this video I'm going to be covering the surprisingly difficult yet extremely common problem of creating custom check boxes as you can see on the right here I have three custom check boxes that all have hover effects all work when you click them all uncheck when you click them again and they work exactly the same as a normal check box you can even tab through them as you can see I got a little shadow effect when you tab to it they all work exactly like a normal check box would and they'll even work for people that are using screen readers or other such devices to tab through the check boxes or to read the labels from the check boxes as they go which is one of the things that is commonly forgotten when creating custom check boxes so to get started here let's create the HTML that we're going to need for these check boxes luckily this is pretty simple we just need a div that is going to wrap our check box so we'll give it a class here we'll just call it check box container and inside of here we're going to put our actual check box contents so first we want to put the input element for the check box we're going to give it a type here and it's going to be check box and then we'll give it an ID here we'll just call this one check box one here close that off and then we're also going to need a label for our check box so let's put a label we need to give it a four tag the four attribute says what is this label for and it is for our check box one input right here cb1 so we say for CB one we essentially just put the ID of what this label corresponds with and then inside of here we're gonna put check box 1 now save that open that up with live server and then since we used this for attribute clicking on the actual label we'll check the check box or uncheck it as we want it to so I'm just gonna copy this check box container here paste it down two more times so that we have three check boxes just like in the example before and I'll just change the IDs and numbers here to be sequentially in order so we got a check box two up there and then down here we'll have check box three and if you say that we now have three check boxes just as we do over here and we're ready to jump into the styles to style these extra check boxes the first thing I want to do is set up our box sizing to the border box just so that sizing our actual elements will be easier with our widths and Heights and then we can...