(music)
Oh, man, this stuff is so, so fun.
Hope you're enjoying the course so far.
If you are, please leave me a good review ⭐⭐⭐⭐⭐.
I really appreciate it.
Thanks for your support.
Thanks for sticking with me.
Now I want to give you a little challenge.
And later on in this course, I'm dedicating an entire section talking about at least at a high level
anyway, CSS styling on forms.
So it's difficult because, you know, one part of me wants to, you know, do CSS styling and custom
toggles and buttons when we get there.
But the other part of me thinks we're talking about checkboxes, so why not just dive into some CSS
now and just show you how to customize checkboxes?
And before I show you the solution, it's always good for you to just to try and figure it out on your
own.
So what do I want you to do?
Well, let's just refresh this page.
This is the default landing page that I want you to create.
Firstly, I want us to have default checkboxes.
The default looks pretty ugly, as you can see.
And I've just got 3 checkboxes.
One, two, three.
And I want the first one checked by default.
So, do you remember how to do that?
It's an attribute.
It's pretty easy.
So that's the default checkboxes.
Obviously, with checkboxes, we can select all 3 at once.
We can deselect all three.
Pretty intuitive, but often when it comes to forms, you want to customize pretty much everything,
right?
You want to make it more intuitive to a user.
And this is how I've designed the custom checkboxes. I've got four. Yes, I could have just had three,
but we've got four. Again, I want the first one checked by default, but you can see how cool and intuitive
it is, you know, it just feels nicer.
If I was a user, I'd much rather want to click these ones than these horrible default ones. And give
it a bash.
I mean, just as a hint, when we have to style custom checkboxes, you have to remove the default styling
from the browser.
So you see those little browser, those little squares?
We have to actually hide that entirely, so you can [set] display to none.
You can set its width and height to zero, and then we have to start from scratch.
We literally just have to create our own little checkbox button and here you can see I've just got a
square, and then we just apply a few styles to pseudo classes like hover.
And then of course when it's checked we want to apply a tick and a nice little blue background.
So, give it a go.
And then in the next lecture I'll code this up with you.
I'm looking forward to it.
See you now.