WEBVTT 0 00:00.320 --> 00:00.620 (music) 1 00:06.730 --> 00:09.400 Oh, man, this stuff is so, so fun. 2 00:09.430 --> 00:11.100 Hope you're enjoying the course so far. 3 00:11.110 --> 00:13.300 If you are, please leave me a good review ⭐⭐⭐⭐⭐. 4 00:13.300 --> 00:14.260 I really appreciate it. 5 00:14.350 --> 00:15.310 Thanks for your support. 6 00:15.310 --> 00:16.570 Thanks for sticking with me. 7 00:17.020 --> 00:19.660 Now I want to give you a little challenge. 8 00:19.660 --> 00:25.450 And later on in this course, I'm dedicating an entire section talking about at least at a high level 9 00:25.450 --> 00:27.700 anyway, CSS styling on forms. 10 00:27.700 --> 00:32.920 So it's difficult because, you know, one part of me wants to, you know, do CSS styling and custom 11 00:32.950 --> 00:35.200 toggles and buttons when we get there. 12 00:35.200 --> 00:40.420 But the other part of me thinks we're talking about checkboxes, so why not just dive into some CSS 13 00:40.420 --> 00:42.730 now and just show you how to customize checkboxes? 14 00:42.730 --> 00:47.530 And before I show you the solution, it's always good for you to just to try and figure it out on your 15 00:47.530 --> 00:48.010 own. 16 00:48.010 --> 00:49.660 So what do I want you to do? 17 00:49.660 --> 00:50.890 Well, let's just refresh this page. 18 00:50.890 --> 00:53.620 This is the default landing page that I want you to create. 19 00:53.620 --> 00:56.560 Firstly, I want us to have default checkboxes. 20 00:56.560 --> 00:59.440 The default looks pretty ugly, as you can see. 21 00:59.950 --> 01:01.520 And I've just got 3 checkboxes. 22 01:01.520 --> 01:02.870 One, two, three. 23 01:02.870 --> 01:05.360 And I want the first one checked by default. 24 01:05.360 --> 01:07.450 So, do you remember how to do that? 25 01:07.460 --> 01:08.600 It's an attribute. 26 01:10.010 --> 01:10.970 It's pretty easy. 27 01:11.180 --> 01:12.590 So that's the default checkboxes. 28 01:12.590 --> 01:15.280 Obviously, with checkboxes, we can select all 3 at once. 29 01:15.290 --> 01:17.510 We can deselect all three. 30 01:17.540 --> 01:22.340 Pretty intuitive, but often when it comes to forms, you want to customize pretty much everything, 31 01:22.340 --> 01:22.520 right? 32 01:22.520 --> 01:24.440 You want to make it more intuitive to a user. 33 01:24.590 --> 01:30.020 And this is how I've designed the custom checkboxes. I've got four. Yes, I could have just had three, 34 01:30.020 --> 01:35.450 but we've got four. Again, I want the first one checked by default, but you can see how cool and intuitive 35 01:35.450 --> 01:37.760 it is, you know, it just feels nicer. 36 01:37.760 --> 01:43.070 If I was a user, I'd much rather want to click these ones than these horrible default ones. And give 37 01:43.070 --> 01:43.760 it a bash. 38 01:43.790 --> 01:51.440 I mean, just as a hint, when we have to style custom checkboxes, you have to remove the default styling 39 01:51.440 --> 01:52.160 from the browser. 40 01:52.160 --> 01:54.710 So you see those little browser, those little squares? 41 01:54.710 --> 01:59.990 We have to actually hide that entirely, so you can [set] display to none. 42 02:00.020 --> 02:05.270 You can set its width and height to zero, and then we have to start from scratch. 43 02:05.270 --> 02:11.190 We literally just have to create our own little checkbox button and here you can see I've just got a 44 02:11.190 --> 02:14.910 square, and then we just apply a few styles to pseudo classes like hover. 45 02:14.910 --> 02:19.860 And then of course when it's checked we want to apply a tick and a nice little blue background. 46 02:19.860 --> 02:21.270 So, give it a go. 47 02:22.090 --> 02:26.010 And then in the next lecture I'll code this up with you. 48 02:26.340 --> 02:27.510 I'm looking forward to it. 49 02:27.540 --> 02:28.140 See you now.