WEBVTT

0
00:00.530 --> 00:01.590
Now, 

1
00:01.680 --> 00:02.080
okay,

2
00:02.090 --> 00:03.170
we could leave it here.

3
00:03.170 --> 00:08.260
But you might be thinking, "Clyde, I really want to create a little check ✔, 

4
00:08.400 --> 00:10.280
a checkmark inside that box". 

5
00:10.280 --> 00:11.030
How do we do that?

6
00:11.030 --> 00:18.980
Well, in order to add that little checkbox or that check item, I'm going to be using a CSS pseudo element

7
00:19.010 --> 00:20.960
called ::after or colon 

8
00:20.960 --> 00:21.830
colon after. 

9
00:22.630 --> 00:23.820
Don't worry too much what it is.

10
00:23.830 --> 00:29.080
It just allows us to add content immediately after the element itself.

11
00:29.530 --> 00:32.890
So yeah, it's kind of a cool, a cool way we can do these things.

12
00:32.890 --> 00:34.000
Let me show you how it works.

13
00:34.000 --> 00:43.390
So now I want to create the checkmark indicator and of course we want it hidden when not checked.

14
00:44.360 --> 00:45.890
This is what we're going to be doing now.

15
00:46.130 --> 00:50.510
So I want to grab our checkmark, which is that span, remember?

16
00:50.510 --> 00:54.560
And here I'm going to target that ::after pseudo element.

17
00:55.290 --> 00:55.950
In here,

18
00:55.950 --> 00:59.310
I want to set its display property to none by default.

19
00:59.310 --> 01:02.250
Because remember, we only want this shown when it's checked.

20
01:02.400 --> 01:08.190
The content can be nothing originally and let's just apply position of absolute to this.

21
01:08.190 --> 01:12.300
So we've got a lot of control where we want that actual check item.

22
01:13.260 --> 01:17.400
Now I want to show the check mark when it's checked.

23
01:17.790 --> 01:18.750
So,

24
01:19.710 --> 01:24.630
show the checkmark when each checkbox

25
01:25.650 --> 01:28.770
has the checked state.

26
01:30.110 --> 01:33.140
Because remember above, we've set the display property to none.

27
01:33.170 --> 01:36.920
So now what I want to do is I want to target our custom class.

28
01:36.950 --> 01:41.990
Yes, we're going to target the input when it's checked, but remember, we've hidden the actual input

29
01:41.990 --> 01:42.810
itself.

30
01:42.830 --> 01:48.050
So we want to deal with the span, with [class of] checkmark.

31
01:48.320 --> 01:53.810
And here I want to affect it's ::after pseudo element.

32
01:53.810 --> 01:59.060
I know, I know it's a bit daunting, but all we're doing is we're going to change the display property

33
01:59.880 --> 02:02.780
from above where we had it as "none", to now

34
02:02.790 --> 02:04.440
"block". That's all we want to do.

35
02:04.440 --> 02:05.980
And we only want that to happen

36
02:06.000 --> 02:08.820
of course, when the input itself is checked.

37
02:08.970 --> 02:10.380
So that's all we've done there.

38
02:10.590 --> 02:17.090
Now, finally, my dear students, we can style the check mark indicator.

39
02:17.100 --> 02:18.210
We can create it.

40
02:18.240 --> 02:18.920
How cool.

41
02:18.930 --> 02:19.950
You are going to check [no pun intended] it out now.

42
02:20.130 --> 02:21.120
It's very, very easy.

43
02:21.150 --> 02:25.620
We target the custom again, the custom class of that label.

44
02:25.620 --> 02:29.190
Within that, we want to deal with the checkmark, right.

45
02:29.190 --> 02:37.440
But of course, we're dealing with the ::after pseudo element and this is where we can apply cool stylings.

46
02:37.440 --> 02:38.760
We can put anything in here.

47
02:38.790 --> 02:43.440
Let's start off by giving it a border, solid rgb()

48
02:44.820 --> 02:46.810
255 255

49
02:46.830 --> 02:47.700
255.

50
02:47.730 --> 02:48.330
How's that?

51
02:48.330 --> 02:52.380
And if you look, if I zoom in, you can actually see it.

52
02:53.170 --> 02:54.040
And scroll down.

53
02:54.040 --> 02:56.110
Can you see it in the top left corner?

54
02:56.950 --> 02:58.240
Top left corner.

55
02:59.020 --> 03:01.150
So that's the start of our check item.

56
03:01.180 --> 03:01.960
How cool.

57
03:03.290 --> 03:05.690
Um, what I can do ...

58
03:05.690 --> 03:06.440
let's give it a border

59
03:06.440 --> 03:07.130
width.

60
03:07.130 --> 03:08.060
Border

61
03:08.860 --> 03:14.650
width, of zero, three pixels, three pixels and zero.

62
03:14.650 --> 03:20.690
And let's spaz this up by giving it a width of 5 pixels.

63
03:20.710 --> 03:23.470
Can you see our check item or our checked,

64
03:23.500 --> 03:26.710
our tick ✔ is starting to take shape, but now we need to apply a height to it,

65
03:26.710 --> 03:27.150
right?

66
03:28.230 --> 03:29.730
Let's do 11 pixels.

67
03:29.760 --> 03:30.750
There we go.

68
03:31.050 --> 03:33.000
That's our little check ✔.

69
03:33.150 --> 03:34.670
And don't worry, we're going to

70
03:34.940 --> 03:35.760
I can do it now for you,

71
03:35.760 --> 03:36.960
I can show you what it what it does.

72
03:36.960 --> 03:38.460
Let's just transform it.

73
03:38.460 --> 03:41.490
Because all we need to do is we need to rotate this bad boy.

74
03:42.000 --> 03:43.950
Let's say 50 degrees should do it.

75
03:43.980 --> 03:44.850
There you go.

76
03:45.060 --> 03:46.320
And you guessed it,

77
03:46.320 --> 03:46.980
we need to move it

78
03:46.980 --> 03:47.370
right?

79
03:47.370 --> 03:52.170
So let's move it to the right and let's move it slightly down.

80
03:52.740 --> 03:54.060
Let's just zoom out a bit.

81
03:54.840 --> 03:57.300
I think that's actually looking really, really cool.

82
03:57.330 --> 03:58.740
Maybe it's a bit too far down.

83
03:58.770 --> 04:00.180
Yeah, I think that's better.

84
04:00.720 --> 04:02.460
And my dear students, this is it.

85
04:02.490 --> 04:05.460
We've literally done it and you can see how easy it is.

86
04:05.460 --> 04:12.270
Like it's very, it can be very daunting when you first start out, but just tackle each small step

87
04:12.270 --> 04:13.140
one by one.

88
04:13.140 --> 04:15.930
And you can see it was very intuitive, right?

89
04:15.930 --> 04:23.130
And now we've got a really cool custom checkbox and I really encourage you on your forms to move away

90
04:23.130 --> 04:24.060
from the default.

91
04:24.060 --> 04:26.580
I mean, don't go crazy by adding animations and all that.

92
04:26.580 --> 04:32.230
That's just irritating for users, but to create really nice custom field buttons is just so much nicer

93
04:32.230 --> 04:36.070
for user experience. And remember what it is we did, right?

94
04:36.070 --> 04:39.040
I'll just quickly run you through it. In our index page,

95
04:39.460 --> 04:42.070
it couldn't really be more simple.

96
04:42.070 --> 04:49.480
We've just got one link to our CSS style sheet, and then below that we've separated our entire page into

97
04:49.480 --> 04:50.200
two sections.

98
04:50.200 --> 04:53.290
The first is default checkbox styling.

99
04:53.290 --> 04:54.640
We didn't do anything.

100
04:54.640 --> 04:57.070
We just let the browser deal with the styling.

101
04:57.070 --> 05:00.160
All we did was we just displayed each one as a block element.

102
05:00.160 --> 05:05.380
That's all we did, and that's why when we are in our browser it looks pretty hideous, right?

103
05:05.410 --> 05:06.400
Nothing special.

104
05:06.820 --> 05:09.670
The next section is we created our custom checkboxes.

105
05:09.670 --> 05:16.060
All we did was we wrapped each checkbox in a label wrapper, and we gave that a class name of custom.

106
05:16.060 --> 05:22.750
We then included a span element and we did the span element because we knew going forward we're going

107
05:22.750 --> 05:28.900
to be targeting that span element with CSS to create a cool little square, a gray square that then

108
05:28.900 --> 05:32.890
goes blue whenever the :checked pseudo class is on.

109
05:33.250 --> 05:34.150
So that's all we did.

110
05:34.150 --> 05:38.860
And then in our style sheet, we literally just tackled each problem one by one.

111
05:38.860 --> 05:42.220
We changed the default styling to block.

112
05:42.310 --> 05:45.010
That meant it could be displayed after each other,

113
05:45.010 --> 05:47.170
one by one. We changed the heading color.

114
05:47.170 --> 05:51.790
We then started removing the browser's ugly default checkbox.

115
05:51.790 --> 05:58.240
Remember, we set its height and width to zero. And then we started working on our custom checkbox styling.

116
05:58.240 --> 06:01.030
We set it, you know, display to block.

117
06:01.030 --> 06:04.750
We gave it a bit of padding so we could move all those labels to the right.

118
06:05.220 --> 06:07.230
We then changed its background color.

119
06:07.590 --> 06:09.750
We gave each square a width and height.

120
06:10.170 --> 06:13.830
We then targeted its :hover CSS class.

121
06:14.100 --> 06:19.650
And then finally we used this ::after pseudo element in order to create a little checkbox.

122
06:19.650 --> 06:25.410
And all we did to create that little check is we used a border, okay?

123
06:25.650 --> 06:31.470
And then we gave it a border width and then we just gave it a height and width and then we rotated it.

124
06:31.470 --> 06:34.040
And that was literally our checked item.

125
06:34.050 --> 06:35.670
Very, very simple way to do it.

126
06:36.750 --> 06:37.740
But there we go.

127
06:37.770 --> 06:39.040
Hope you're learning a ton.

128
06:39.060 --> 06:42.300
Hope you're having fun ... and we've got a TON more to cover.

129
06:42.300 --> 06:48.330
We haven't even started on the meaty stuff yet, so I'm really looking forward to the next lectures

130
06:48.330 --> 06:49.670
and the next sections.

131
06:49.680 --> 06:50.520
See you now.