1
00:00:02,330 --> 00:00:05,140
So let's work on this checkbox now

2
00:00:05,350 --> 00:00:12,480
and first of all, I want to ensure that these styles here which target all inputs, which includes the checkbox,

3
00:00:12,480 --> 00:00:15,810
do not target the checkbox,

4
00:00:15,820 --> 00:00:17,290
I don't want it.

5
00:00:17,290 --> 00:00:26,500
So what I will do here is, I will go to this input selector here and actually add the not pseudo selector,

6
00:00:27,100 --> 00:00:35,470
not allow us to say that it should target all inputs which do not fulfill the requirement we add here

7
00:00:35,500 --> 00:00:36,860
inside of the parentheses

8
00:00:36,940 --> 00:00:40,240
and that requirement just is another selector.

9
00:00:40,240 --> 00:00:47,970
So here, I will actually add another attribute selector with square brackets, type equals checkbox.

10
00:00:48,130 --> 00:00:53,400
So all in inputs which are not of type checkbox will receive these styles

11
00:00:53,580 --> 00:00:57,910
and on the other hand, the checkbox will not receive them and that's exactly what I want.

12
00:00:57,910 --> 00:01:04,810
Now we can also add that to our signup-form input down there, in front of the focus pseudo selector

13
00:01:05,200 --> 00:01:07,370
and with that, everything should work as before

14
00:01:07,510 --> 00:01:13,510
and we don't see a visual difference but if you inspect your checkbox, you'll see that it doesn't get

15
00:01:13,580 --> 00:01:18,190
the default input styles other than display block and so on which it should get,

16
00:01:18,190 --> 00:01:20,360
it doesn't get the other ones though.

17
00:01:20,590 --> 00:01:23,410
So with that, we're ready to restyle it

18
00:01:23,410 --> 00:01:24,940
and how do we do that?

19
00:01:25,150 --> 00:01:29,930
Well for that, we need to select the checkbox. We already saw how we could do this here,

20
00:01:30,020 --> 00:01:35,010
let me copy that selector and add it again, maybe here in front of the button

21
00:01:35,200 --> 00:01:42,040
and just to mix things up, I'll use type equals checkbox here, just to prove that this also

22
00:01:42,110 --> 00:01:46,750
works and in there, we can change its look.

23
00:01:46,820 --> 00:01:56,060
Now what we can do for example is, we could give it a border of one pixel solid and also this light

24
00:01:56,080 --> 00:01:56,700
grey

25
00:01:56,780 --> 00:02:02,690
we got on all our inputs. We could add a background,

26
00:02:02,780 --> 00:02:09,680
let's set it to white and maybe give it a width of 1rem and a height of 1rem.

27
00:02:09,690 --> 00:02:11,830
So I'm basically building a box here,

28
00:02:11,970 --> 00:02:18,310
keep in mind our checkbox is of type display inline block, so we can build it as a box.

29
00:02:18,360 --> 00:02:24,520
I build a box which has a border white background and it's 1rem wide and high.

30
00:02:24,660 --> 00:02:31,450
If we do that and we save that and we reload, it increased in size

31
00:02:31,500 --> 00:02:33,250
but I don't see a white background,

32
00:02:33,270 --> 00:02:34,550
I don't see my border,

33
00:02:34,560 --> 00:02:36,810
we still got that default style.

34
00:02:36,810 --> 00:02:41,960
However it clearly does receive our styles as we can confirm if we select it, here

35
00:02:42,060 --> 00:02:45,020
all the styles are applied.

36
00:02:45,090 --> 00:02:51,480
Now the thing is, just as the select, the checkbox is a special type of input.

37
00:02:51,570 --> 00:02:58,320
If we scroll down to its browser default styles, we see that it gets this webkit appearance style which

38
00:02:58,320 --> 00:03:05,390
sets it to checkbox. For the select by the way, we can also see webkit appearance menu list.

39
00:03:05,490 --> 00:03:09,330
These are important default styles that defined that

40
00:03:09,360 --> 00:03:14,970
the select has these errors and works like this and that the checkbox works like this.

41
00:03:14,970 --> 00:03:17,730
If you want to change that, you have to overwrite it.

42
00:03:17,730 --> 00:03:22,430
Now this would also be possible for the select dropdown but I want to do it on the checkbox since that's

43
00:03:22,440 --> 00:03:24,780
a bit more interesting in my opinion.

44
00:03:24,780 --> 00:03:30,870
So let's overwrite it by setting that -webkit appearance style.

45
00:03:30,870 --> 00:03:33,760
Now don't be irritated by that leading dash here,

46
00:03:33,780 --> 00:03:36,090
this is a valid property name,

47
00:03:36,090 --> 00:03:39,300
it's looking strange because it's a browser a specific one,

48
00:03:39,300 --> 00:03:43,430
it's not the same in all browsers and that's why it's starting with a dash

49
00:03:43,650 --> 00:03:46,910
and we should set it to none, to disable that default.

50
00:03:46,970 --> 00:03:49,010
If we now save that and reload,

51
00:03:49,020 --> 00:03:53,190
now we got the new style and now we can't check it actually.

52
00:03:53,280 --> 00:03:54,620
We'll work on that,

53
00:03:54,630 --> 00:04:02,190
we got our style at least. Now as I said, this is browser specific, so we should also add Moz's appearance,

54
00:04:02,190 --> 00:04:07,280
which is actually the attribute required by Mozilla to overwrite the default look there too

55
00:04:07,530 --> 00:04:10,440
and let's add appearance in general and set it to none,

56
00:04:10,590 --> 00:04:16,710
this will also help all browsers to understand that and they don't have their browser default or

57
00:04:16,710 --> 00:04:21,760
actually, it would overwrite the browser default here if also understands this syntax.

58
00:04:21,780 --> 00:04:25,810
So now we're forcing this checkbox to look the way we want it to look,

59
00:04:25,920 --> 00:04:32,180
now before we continue styling it, one thing we can see is that it's now not inline or not centered,

60
00:04:32,180 --> 00:04:34,340
vertically centered to the label.

61
00:04:34,620 --> 00:04:41,070
So we can fix this by going up to our checkbox and label selector and setting vertical align to

62
00:04:41,070 --> 00:04:41,770
middle,

63
00:04:41,880 --> 00:04:42,580
let's try that,

64
00:04:42,600 --> 00:04:44,250
let's save that and reload,

65
00:04:44,670 --> 00:04:45,600
that looks better.

66
00:04:45,780 --> 00:04:51,750
Now you could also try different values, like bottom for example which in this case in my opinion looks

67
00:04:51,780 --> 00:04:53,650
even better

68
00:04:53,650 --> 00:04:59,810
a tiny bit because now they're aligning at the bottom and I believe this looks better here.

69
00:04:59,850 --> 00:05:06,410
Now one thing that's missing of course is our ability to check this and to see a difference.

70
00:05:06,420 --> 00:05:10,760
It's important to understand that technically, this still can be checked.

71
00:05:10,770 --> 00:05:16,520
So if I click in there, this actually behind the scenes is switching between being checked and not being

72
00:05:16,520 --> 00:05:18,830
checked, we just don't see that here.

73
00:05:18,890 --> 00:05:22,150
The reason for this is that no style is set for this being checked,

74
00:05:22,220 --> 00:05:25,620
previously, the webkit appearance did this for us,

75
00:05:25,640 --> 00:05:30,380
the default value is set by the browser but since we overwrote this to be none, we have to do it manually.

76
00:05:30,630 --> 00:05:37,490
So let's again target signup-form input type equals checkbox or feel free to try out a different

77
00:05:37,490 --> 00:05:38,620
selector here

78
00:05:39,080 --> 00:05:43,080
and in there, now we use the checked pseudo class.

79
00:05:43,100 --> 00:05:47,830
So as you see, you work a lot with pseudo classes when working with forms.

80
00:05:48,020 --> 00:05:49,800
Now in here, we set the styles

81
00:05:49,820 --> 00:05:52,070
we want to set for the check mode

82
00:05:52,400 --> 00:06:00,380
and there, I just want to set the background to my light green color and change the border to my dark

83
00:06:00,410 --> 00:06:03,760
green color, which we also use in other places of the app,

84
00:06:03,800 --> 00:06:04,720
for example here,

85
00:06:04,730 --> 00:06:10,300
so this dark green. I'll copy that from the main header brand and enter it as a color here.

86
00:06:10,580 --> 00:06:17,230
Now with that if we reload, we can actually check this as you see, the remaining part just is that I want

87
00:06:17,230 --> 00:06:18,640
to get rid of that outline,

88
00:06:18,670 --> 00:06:26,670
so when we're focusing this checkbox, I don't want to have an outline, so therefore maybe I just remove

89
00:06:26,700 --> 00:06:32,900
that not selector from all the other inputs and see if that works the way I want it to work,

90
00:06:33,220 --> 00:06:33,630
yes,

91
00:06:33,780 --> 00:06:36,490
this now certainly looks better.

92
00:06:36,510 --> 00:06:41,670
So now we get our custom checkbox here with our own style overwriting the default

93
00:06:41,850 --> 00:06:43,590
and with that, we achieved a lot,

94
00:06:43,590 --> 00:06:47,690
let's also check this on the mobile screen, that's looking good there too.

95
00:06:48,000 --> 00:06:50,730
So now let's see what else we can do with that form.