WEBVTT 0 00:00.600 --> 00:06.440 There is something I want to discuss now specifically related to radio buttons and checkboxes. 1 00:06.450 --> 00:13.410 Specifically, I want to talk about the checked, the default, and the indeterminate states, or I should 2 00:13.410 --> 00:15.030 say pseudo classes. 3 00:15.030 --> 00:20.910 And when I talk about radio buttons and checkboxes, all I mean is an input element where it's type attribute 4 00:20.910 --> 00:25.530 is either set to radio or it's type attribute is set to checkbox. 5 00:26.160 --> 00:31.980 Remember, we did this a long time ago. Although they visually look kind of similar, 6 00:32.010 --> 00:35.360 they are very different in their purpose and functionality. 7 00:35.370 --> 00:40.680 Remember radio buttons, you can only select one within a group and in that sense they are mutually 8 00:40.680 --> 00:45.630 exclusive, whereas an input of type checkbox, well, that is just a checkbox. 9 00:45.630 --> 00:49.890 You can have one, you can have more, they can all be selected or none can be selected. 10 00:49.890 --> 00:51.620 But anyways, let me move on. 11 00:51.630 --> 00:57.030 As I mentioned, there are three very important states that you need to know about when working with 12 00:57.030 --> 01:05.620 radio buttons and checkboxes, and they are :checked, and the :default state and the :indeterminate state. 13 01:05.800 --> 01:06.400 All right. 14 01:06.400 --> 01:06.820 All right. 15 01:06.850 --> 01:09.010 Let me discuss each one very briefly. 16 01:09.040 --> 01:14.650 First, let's look at this checked state. When checked, we know that those elements are going to be matched 17 01:14.650 --> 01:17.170 by the :checked pseudo class. 18 01:17.170 --> 01:18.670 And when might this be useful? 19 01:18.670 --> 01:24.580 Well, it might be useful when you want to remove the default styling and want your own checked custom 20 01:24.580 --> 01:25.300 styling. 21 01:25.300 --> 01:29.170 And remember, we've seen examples of this a few sections ago. 22 01:29.170 --> 01:33.670 We built our own radio buttons and in fact, in order to remove the browser default, remember we had 23 01:33.670 --> 01:38.830 to set the appearance property to none, and then we built the styles back up ourselves. 24 01:38.830 --> 01:39.460 You know what? 25 01:39.460 --> 01:41.350 It's actually better for me just to show you. 26 01:41.380 --> 01:43.750 So let me take the code that we we did earlier. 27 01:43.750 --> 01:46.570 I'm just going to slightly amend it with different animations. 28 01:46.570 --> 01:47.770 Let's have a look at that code. 29 01:47.770 --> 01:52.390 I'll run you through it and you'll remember, I'm sure you'll recall the :checked pseudo class. 30 01:52.390 --> 01:54.670 It really, really was very intuitive. 31 01:54.700 --> 01:55.870 Let me show you now quickly. 32 01:55.870 --> 01:58.390 So what is this checked state all about? 33 01:58.420 --> 02:03.940 Well, you've already seen examples of this where we built our own custom radio buttons, and here I 34 02:03.940 --> 02:07.090 kind of built it up again, but I've just got slightly different animation, 35 02:07.090 --> 02:07.360 right? 36 02:07.360 --> 02:13.810 That red dot now just comes from the center and the user can select their favorite fruit. 37 02:14.110 --> 02:14.920 Very simple. 38 02:14.920 --> 02:19.300 So I'm not going to write the HTML code up with you again because we already did it early on in this 39 02:19.300 --> 02:19.900 course. 40 02:19.900 --> 02:21.370 But I can run you through it, right? 41 02:21.370 --> 02:22.570 I mean, it's very, very simple. 42 02:22.570 --> 02:28.240 The first thing we have to do effectively is grab all of our inputs with type radio, and we have to 43 02:28.240 --> 02:30.460 remove the default styling on these radio buttons. 44 02:30.460 --> 02:33.550 And we do that by setting its appearance property to none. 45 02:33.580 --> 02:40.960 If we don't do that, it's going to be excruciatingly irritating because what's going to happen is the 46 02:40.960 --> 02:43.510 default selection styling is going to apply. 47 02:43.750 --> 02:44.440 Look. 48 02:44.470 --> 02:48.670 So if I click Banana or Strawberry, we can see that behind our custom red dot, 49 02:48.700 --> 02:49.900 we've got this blue dot. 50 02:49.990 --> 02:51.430 Not very ideal, is it? 51 02:51.550 --> 02:55.660 So that's exactly why we set the appearance property to none. 52 02:56.740 --> 03:01.360 And then all I did here, and I'll give you this file so you can open it up and we can start working 53 03:01.360 --> 03:02.260 with it later, 54 03:02.260 --> 03:07.780 I just applied some styling, you know, our own custom styling to our input of type radio. 55 03:08.170 --> 03:12.730 Then what I did was I accessed the ::before pseudo element in order to create that round dot. 56 03:12.730 --> 03:17.080 And I just created that round dot by literally setting its background color to red, giving it a border 57 03:17.080 --> 03:19.200 radius and of course giving it a width and height. 58 03:19.220 --> 03:20.020 That's all I did. 59 03:20.080 --> 03:23.440 And of course I just added these transform CSS properties on here. 60 03:23.440 --> 03:25.510 So it doesn't just appear instantly. 61 03:25.810 --> 03:27.550 It looks like an animation. 62 03:27.550 --> 03:30.970 "So then, Clyde, where does this checked state come into the picture?" 63 03:31.640 --> 03:34.520 Well, let's assume we don't have a checked state. 64 03:34.550 --> 03:35.320 Let's comment that out. 65 03:35.330 --> 03:36.170 Go to the browser. 66 03:37.360 --> 03:38.320 What's going to happen? 67 03:38.440 --> 03:44.590 Well, nothing, because when the user checks this input box, nothing happens. 68 03:44.590 --> 03:48.970 We haven't defined any CSS that's targeting any state. 69 03:48.970 --> 03:55.420 So nothing happens, which is why we have to have this input of type radio where we target the checked 70 03:55.420 --> 04:01.870 pseudo class, because now we're saying, hey, when the pseudo class is checked, we can now access that 71 04:01.870 --> 04:02.880 red dot, right, 72 04:02.890 --> 04:05.190 which we set in the ::before pseudo element. 73 04:05.200 --> 04:07.750 And of course we can set its scale to 1. 74 04:07.750 --> 04:09.760 At the moment the scale is set to 0. 75 04:09.760 --> 04:10.470 So there we go. 76 04:10.480 --> 04:11.320 Very, very simple. 77 04:11.320 --> 04:16.330 And this is just kind of a recap for you as to how we used the checked state. 78 04:16.360 --> 04:18.130 The HTML is very simple. 79 04:18.130 --> 04:21.640 We just wrapped every radio button in a paragraph element. 80 04:22.490 --> 04:23.360 That's basically it. 81 04:23.360 --> 04:30.290 And we put everything, all those red dots and our custom radio button in the span elements. 82 04:30.500 --> 04:32.510 So that's all I've done. 83 04:32.540 --> 04:34.070 Let's hop back to the lecture.