Name: Custom Checkbox Tutorial
Uploaded: 2020-03-28T16:52:50.000Z
Duration: 14 min 49 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Gerund

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.

We just need a div that is going to wrap our checkbox so we'll give it a class here.

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.

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

The four Attributes says, What is this label for?

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

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.

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.

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.

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.

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.

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.

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

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.