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 unchecked.

When you click them again and they work exactly the same as a normal check box, you can even tab through them.

As you see, I got a little shadow effect when you tap to it.

They all work exactly like a normal check boxwood.

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 for gotten one of creating custom check boxes.

So to get started here, let's create the age team all 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 checkbox so we'll give it a class here.

What is?

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 gonna give it a type here, but it's gonna be check box, and then we'll give it an I.

D.

Here.

What is called this one?

Check box one here.

Close that off.

And then we're also going to need a label for our checkbox.

So let's put a label.

We need to give it a four tag.

The four Attributes says, What is this label for?

And it is for our check box one input right here.

C B one.

So we say four c B one.

We essentially just put the I d of what this label corresponds with and then inside of here, we're gonna put check box one.

I'll save that.

Open that up with live server.

And then, since we used this four attributes clicking on the actual label will check the check box or uncheck it as we wanted to.

So I'm just gonna copy this check box container here pasted down two more times that we have three check boxes, just like in the example before and I'll just change the I.

D.

S and numbers here to be sequentially in order.

So we gotta check box two up there and then down here, we'll have a check box three.

And if you say that we have three check boxes, Justus, we do Over here, we're ready to jump into the styles to style these actual check boxes.

The first thing I want to do is set up our box sizing to be border box.

Just so that size and our actual elements will be easier with our wits and heights.

And then we can go on to style in the container.

So we just check box container here and we're going to use flex box in order to lay out our checkbox input element and our label.

Because blacks box makes it extremely easily, vertically aligned are elements, as you can see over here are check box is actually at the top of our text.

If we zoom in here, you can see that it doesn't line up quite right with the bottom of our text.

So what we want to do is make us so that's positioned exactly in the center, so we'll use display of flex here and then a line items center in order to center those things vertically.

And now you can see our check boxes dead center with our text, which is exactly what we want Now.

It could move on to actually styling the label for a check box here.

So let's go to our check box container class here, and we want to select the label inside of that and all we want to do in here is essentially make it so that our label has a point when we hover over it because we want to indicate that's clickable.

So in here, we're going to change our cursor.

We're gonna make it pointer.

So now when we hover over our label, we now get our point, your icon, and we're also gonna want to do the same thing on our check box.

So it's great.

Another selector here and this time it's gonna be for input element, and we want only select our check box of input.

So we'll say when the type is equal to check box.

Then we want to use another cursor of pointer here.

So now, hovering over the check box or the actual label will give us a pointer icon so that we even know it's clickable instead of just the normal cursory.

The next thing that we're gonna want to do is we're gonna want to hide this actual input element for the check box because it's not easy to style these across different browsers.

So we're going to create our own checkbox icon from scratch.

So inside of our check box, look to hear the first thing you'd think of doing is just using display none to completely remove this element that will work.

But now we can no longer tab through a different check Boxes and screen readers won't actually pick up these check box items since they're no longer being displayed.

So instead, what we want to use is you want to set the apace ity to zero, and now it'll be disappeared.

But we also want to make it so that our checkbox input element is not in our document and taking up space.

If we were to change this to be 50% of pasty, you see this check box icon is still here and it's taking up space even when we change it to zero you could see the text doesn't move over to fill in that space.

So if we use position of absolute now, our element is no longer inside of the document taking up space.

So our checkbox elements are now exactly where they need to be.

So if we change this back to 0.5, you can see it's just overlaying inside of our label, which is fine for our use case.

We can change it back to zero, and now this is essentially the same as if we had done display none.

This is one of the steps that is commonly overlooked when creating custom check boxes and is incredibly important in order to support tabbing, which is very common as well, a screen readers for people that have problems seen.

The next thing we want to do is create our new check box.

I come in order to do this.

We're going to select our label element, and we're going to use a pseudo elements Lecter of before, which essentially ads in content before our label.

So if we use the before selector here and we need to supply a content for any type of pseudo elements such as before and are content is just going to be blank, since we don't want anything inside of her icon.

And then what we want to do is we want to give it a width and a height.

We're going to use one e m that way or check box will scale with our farm size and always be the correct size.

No matter of our font is as big a heading for a small is up aircraft.

We'll do the same thing for the heights that we have a perfect square When then we'll give it a border here so that we can see what we're working with.

Will also use E.

M.

With this so that way to a scale with our font size.

Make it solid black.

And if you say that, you'll see that our check boxes actually don't have any with being applied to them.

And that's because these pseudo a woman's here inherit the display of their parent.

So right now, our studio element for our label is in line, since labels air in line by default and in line elements can't have any whip.

So let's go up to our label here, and we'll change this to display Flex, which will make displaying our checkbox icon where we want it easier in the future.

And if we say that you now see that we have these three checkbox icons, which is perfect, they don't do anything right now when we click on them.

But we'll add that functionality in a little bit.

What's finished dialing up our element here by adding a border radius to it to slightly around the corners.

We'll just stay 0.15 e m again so that it will scale with the size of our fund.

And then lastly, we use a margin on the right side 0.5 e m.

And if we saved that, we now have checkbox icons that look very somewhere to the check box that comes over here in order to add a hover effect or icon or got on here, select our label, I will say when we hover over our label, we want to change the before element of our label.

We want to give it a background color here, and we'll just use a light green background color here.

And if we say that hovering over our label will now cause our checkbox toe have that background color, which is exactly what we want.

But because we used a nope, a city of zero and position absolute for our check box element.

You see, when we hover over here are checkbox Element is hidden right here with you up a city of zero, I'll make this point file so we can see it.

You can see when we hover over that we no longer get our background color.

And that's because we're no longer hovering over our label hovering over a check box element.

So we'll add another selector here using the truck box container again.

And this time we use it to select the actual check box instead of the label.

Well, say input with the type equal to check Fox and then we wantto select when it's being hovered.

And then we want to change our label, which is the very next child of our element.

So we used the plus selector which selects the very next sibling.

Next to this element which will be our label will say label and the before element is what we want to change.

And now, when we saved that hovering over actual checkbox icon will also do the highlight on our new checkbox icon that we created, which is exactly what we want.

And essentially, this Lecter's saying inside of our check box container.

Look for our check box input element when we hover over it, select the very next child that is a label and take the before element and gave it this background color.

And this works because our label is after input.

If we instead made our label before input, we would no longer get that hover effect when we went over this element.

So we need our label to always be after our input in order to get this hover effect using the plus selector.

Here, let me change this a pasty back to zero so we no longer see those checkbox the icons.

And the next thing that we want to do is make it so that when we click on our check box, it will actually do something.

It'll add the check and change our background color.

Let's go down here.

We'll select our check box container again.

We'll select the input element with the type of check box, and instead of hover, we want to say checked, which will be selected whenever our check box is checked, and then we again want to flex the label before Element.

So now in here, what we want to do is change the background color to be a slightly darker green color.

Get that right here.

So now if we save that, you could see when we hover it.

It's this light green, and we check it.

It's a slightly darker green color, which is perfect, not a work for all of them.

And they'll stay that way even when we unsolicited um, and then if we uncheck it, you'll see that this dark green color will go away, and it's already starting to act a lot like a normal check box.

Next.

What we want to do is add in that actual checkbox icon, and in order to do that, we want to use the contents selector here, and that will tell us what content do we want to be inside of our element and we want a check mark icon, and in order to get that check mark icon in CSS, all we need to do is use this icon code, which is 002714 which stands for a checkmark icon.

So now if we save this and go and click on one of our boxes here, you'll say, We now get our check box icon inside of our check box, and if we uncheck, it will go away and it will stay there for all of our different check boxes.

But currently, this check mark icon is not displayed very well, so we want to change our display a little bit in order to make it so that it centered inside of her icon.

So we'll go down here.

We'll use display of flex inside of here, will justify the content into the center to make it so that it is Senator aligned horizontally as well as well line the items in the centre to vertically aligned.

Its center, an hour checkmark icon, is perfectly in the center of our check box, and the last thing we need to do it's changed our text color to be white so that a checkmark icon will show up a little bit better than the black icon.

Now you'll see it when we go and use these check boxes now, all work exactly as expected, But normally when you click on a check box before releasing, something should happen to show that you've clicked on it.

So in order to do that, we're going to use the focus ST.

This will also allow us to see which check box we have hovered over when we use tab in order to select our check boxes instead of the mouse cursor.

So in order just like that will go into our check box container here will use our input element to select our check box.

And then we'll use the focus attributes in order to say which checkbox are we currently focused on.

And then since we want to style the label, we use that simply selector to get the four elements of our label.

And what we want to do in here is used a box shadow In order to use that shadow effect that we see here, we click on an element and focus on it or have through our elements.

So in order to do that, we wanna use the first property of our box shadow, which is our offset in the extraction, which we want to be Zero since we want box shadow to be in the dead center of our ex access as well as zero for the Y Axis office.

That and then this third property is going to be the amount of Blair we want our shadow tohave.

So we want to use 20 pixels, so it'll blur a little bit away from our check box, but not too far.

And then lastly, we'll just use the color of black here.

And if we say that now, when we click on it, you see, we get this shadow around our check box and this works for all of our check boxes as well as when we tab through them.

Now the only thing left to do is go back into our index dot HTM Oh, here.

And add in some line breaks here in order to space out our check boxes.

And if you say that our check boxes now work exactly the same as a check boxes over here on this page and that's exactly want this is perfect.