Now,
okay,
we could leave it here.
But you might be thinking, "Clyde, I really want to create a little check ✔,
a checkmark inside that box".
How do we do that?
Well, in order to add that little checkbox or that check item, I'm going to be using a CSS pseudo element
called ::after or colon
colon after.
Don't worry too much what it is.
It just allows us to add content immediately after the element itself.
So yeah, it's kind of a cool, a cool way we can do these things.
Let me show you how it works.
So now I want to create the checkmark indicator and of course we want it hidden when not checked.
This is what we're going to be doing now.
So I want to grab our checkmark, which is that span, remember?
And here I'm going to target that ::after pseudo element.
In here,
I want to set its display property to none by default.
Because remember, we only want this shown when it's checked.
The content can be nothing originally and let's just apply position of absolute to this.
So we've got a lot of control where we want that actual check item.
Now I want to show the check mark when it's checked.
So,
show the checkmark when each checkbox
has the checked state.
Because remember above, we've set the display property to none.
So now what I want to do is I want to target our custom class.
Yes, we're going to target the input when it's checked, but remember, we've hidden the actual input
itself.
So we want to deal with the span, with [class of] checkmark.
And here I want to affect it's ::after pseudo element.
I know, I know it's a bit daunting, but all we're doing is we're going to change the display property
from above where we had it as "none", to now
"block". That's all we want to do.
And we only want that to happen
of course, when the input itself is checked.
So that's all we've done there.
Now, finally, my dear students, we can style the check mark indicator.
We can create it.
How cool.
You are going to check [no pun intended] it out now.
It's very, very easy.
We target the custom again, the custom class of that label.
Within that, we want to deal with the checkmark, right.
But of course, we're dealing with the ::after pseudo element and this is where we can apply cool stylings.
We can put anything in here.
Let's start off by giving it a border, solid rgb()
255 255
255.
How's that?
And if you look, if I zoom in, you can actually see it.
And scroll down.
Can you see it in the top left corner?
Top left corner.
So that's the start of our check item.
How cool.
Um, what I can do ...
let's give it a border
width.
Border
width, of zero, three pixels, three pixels and zero.
And let's spaz this up by giving it a width of 5 pixels.
Can you see our check item or our checked,
our tick ✔ is starting to take shape, but now we need to apply a height to it,
right?
Let's do 11 pixels.
There we go.
That's our little check ✔.
And don't worry, we're going to
I can do it now for you,
I can show you what it what it does.
Let's just transform it.
Because all we need to do is we need to rotate this bad boy.
Let's say 50 degrees should do it.
There you go.
And you guessed it,
we need to move it
right?
So let's move it to the right and let's move it slightly down.
Let's just zoom out a bit.
I think that's actually looking really, really cool.
Maybe it's a bit too far down.
Yeah, I think that's better.
And my dear students, this is it.
We've literally done it and you can see how easy it is.
Like it's very, it can be very daunting when you first start out, but just tackle each small step
one by one.
And you can see it was very intuitive, right?
And now we've got a really cool custom checkbox and I really encourage you on your forms to move away
from the default.
I mean, don't go crazy by adding animations and all that.
That's just irritating for users, but to create really nice custom field buttons is just so much nicer
for user experience. And remember what it is we did, right?
I'll just quickly run you through it. In our index page,
it couldn't really be more simple.
We've just got one link to our CSS style sheet, and then below that we've separated our entire page into
two sections.
The first is default checkbox styling.
We didn't do anything.
We just let the browser deal with the styling.
All we did was we just displayed each one as a block element.
That's all we did, and that's why when we are in our browser it looks pretty hideous, right?
Nothing special.
The next section is we created our custom checkboxes.
All we did was we wrapped each checkbox in a label wrapper, and we gave that a class name of custom.
We then included a span element and we did the span element because we knew going forward we're going
to be targeting that span element with CSS to create a cool little square, a gray square that then
goes blue whenever the :checked pseudo class is on.
So that's all we did.
And then in our style sheet, we literally just tackled each problem one by one.
We changed the default styling to block.
That meant it could be displayed after each other,
one by one. We changed the heading color.
We then started removing the browser's ugly default checkbox.
Remember, we set its height and width to zero. And then we started working on our custom checkbox styling.
We set it, you know, display to block.
We gave it a bit of padding so we could move all those labels to the right.
We then changed its background color.
We gave each square a width and height.
We then targeted its :hover CSS class.
And then finally we used this ::after pseudo element in order to create a little checkbox.
And all we did to create that little check is we used a border, okay?
And then we gave it a border width and then we just gave it a height and width and then we rotated it.
And that was literally our checked item.
Very, very simple way to do it.
But there we go.
Hope you're learning a ton.
Hope you're having fun ... and we've got a TON more to cover.
We haven't even started on the meaty stuff yet, so I'm really looking forward to the next lectures
and the next sections.
See you now.