WEBVTT 0 00:00.350 --> 00:02.750 Welcome back to yet another lecture. 1 00:02.750 --> 00:06.200 And now we're going to be looking at the input with type search. 2 00:06.200 --> 00:09.500 But like I mentioned, I want to add a cool funky design. 3 00:09.500 --> 00:16.310 I want to have a cross when nothing is entered into that box, and then I want to have a checkmark when 4 00:16.310 --> 00:22.610 text is starting to be entered. And I'm going to be using the CSS pseudo element selector ::after. 5 00:22.610 --> 00:27.020 So it's going to be very simple, but I want to do more and more of these examples with you 6 00:27.020 --> 00:32.570 so you start becoming very aware of how it's done and you'll see it's very, very intuitive. 7 00:32.900 --> 00:36.350 The first thing I want to do, of course, is create an HTML document. 8 00:36.500 --> 00:38.180 Let's just zoom in so you can see better. 9 00:39.600 --> 00:44.910 In here we can have a <head>, then <style> because we are going to be adding styles to our search box. 10 00:44.910 --> 00:48.480 But for now, let's just start on the actual form itself. 11 00:49.200 --> 00:51.390 We don't need an action in here. 12 00:51.390 --> 00:53.970 Let's have our input of type search. 13 00:54.510 --> 00:57.960 We can have a name of "q" - that's just convention. 14 00:57.960 --> 01:00.690 An ID we can have is mySearch 15 01:00.690 --> 01:03.930 for example. We can have a placeholder. 16 01:05.440 --> 01:09.640 Placeholder ... and we can assign it to the value of search. 17 01:10.830 --> 01:14.130 We can make this a required input type. 18 01:14.160 --> 01:17.400 Okay, let's just look what it looks like on the browser. 19 01:17.400 --> 01:18.010 There we go. 20 01:18.030 --> 01:19.110 Very straightforward. 21 01:19.380 --> 01:25.020 And then let's add a button with type submit. 22 01:26.870 --> 01:28.070 The word submit. 23 01:29.360 --> 01:33.710 And of course, if the user tries to submit the form without typing anything, we get an error. 24 01:33.810 --> 01:34.620 So there we go. 25 01:34.650 --> 01:37.040 Actually, instead of the word submit, let's have search. 26 01:37.280 --> 01:38.600 Makes more intuitive sense. 27 01:39.260 --> 01:46.370 And then under the button, remember I said I want to have now a cross when nothing is entered, and then 28 01:46.370 --> 01:49.970 when it's valid, I want that check mark to be displayed. 29 01:50.060 --> 01:51.170 So how can we do that? 30 01:51.170 --> 01:54.560 Well, I'm going to create an empty div here and then we're going to style it. 31 01:54.560 --> 01:54.900 Okay. 32 01:54.920 --> 02:04.340 So, firstly let's just have its display property set to inline because by default it's a block element 33 02:04.340 --> 02:05.720 and I want it inline. 34 02:05.720 --> 02:06.020 Okay. 35 02:06.020 --> 02:11.780 So I want to display an X and a check mark to the right of the search box indicating whether it's valid 36 02:11.780 --> 02:12.470 or invalid. 37 02:12.470 --> 02:17.660 And you've already seen many examples in this course of us targeting the :valid and :invalid pseudo class. 38 02:17.690 --> 02:23.900 What's really cool is that they apply to many different widgets and then it becomes very easy and intuitive 39 02:23.930 --> 02:25.850 to style these widgets. 40 02:25.850 --> 02:26.990 So it's very, very cool. 41 02:26.990 --> 02:32.780 So firstly, let's target the input when it's invalid, okay, which is the default starting state - 42 02:32.780 --> 02:34.490 the user hasn't typed anything, have they? 43 02:34.490 --> 02:39.990 And then what I want to do is I want to target all the div element descendants, and I'm going to target 44 02:39.990 --> 02:42.780 this ::after pseudo element, right? 45 02:42.780 --> 02:45.660 And with this, we need to set its content. 46 02:45.810 --> 02:48.150 And I'm going to get back to this in a second. 47 02:48.600 --> 02:49.920 Or actually we could do it now. 48 02:49.920 --> 02:53.190 I want there to be an X, and how do we put an X in here? 49 02:53.190 --> 02:55.500 Well, one way is we can use a website, 50 02:55.500 --> 02:59.940 let me just open it up, called toptal.com. 51 02:59.940 --> 03:06.600 But I want to target the URL where we are specifically looking at HTML arrows. 52 03:07.170 --> 03:12.960 And it's a really cool website because it gives us all the symbol codes in HTML that we can use for 53 03:12.960 --> 03:14.180 our website design. 54 03:14.190 --> 03:15.510 Let me just expand this. 55 03:15.660 --> 03:16.380 Here we go. 56 03:16.620 --> 03:19.830 I want the ... let's do a check mark first. 57 03:20.930 --> 03:21.980 I quite like this middle one. 58 03:22.670 --> 03:23.660 Let's click on that. 59 03:23.660 --> 03:25.490 And we want the CSS code. 60 03:25.580 --> 03:25.780 Okay. 61 03:25.790 --> 03:26.810 That's what we want. 62 03:27.490 --> 03:30.550 The other option, you can either write the CSS code, 63 03:32.720 --> 03:33.890 you know what I just realized? 64 03:33.890 --> 03:35.180 We're not doing the check marks yet. 65 03:35.210 --> 03:36.410 We're doing the cross, aren't we? 66 03:36.440 --> 03:38.030 So let's start with the cross. 67 03:39.190 --> 03:41.380 I quite like the first one, let's just use the first one. 68 03:41.380 --> 03:43.750 What we could do is copy this cross itself. 69 03:44.110 --> 03:47.200 Or we could use this CSS code entity. 70 03:47.230 --> 03:49.290 Remember, we can't use the decimal value. 71 03:49.300 --> 03:55.180 We have to use the hexadecimal value, which is why we have to use 292B. So we can copy this 72 03:55.180 --> 03:57.370 and we can put that in its content. 73 03:57.460 --> 03:57.640 Okay. 74 03:57.670 --> 03:58.990 And if we save this 75 03:59.790 --> 04:04.460 and we go here, we can see we've got that X, right? 76 04:04.470 --> 04:05.950 How awesome is that? 77 04:05.970 --> 04:06.870 (sound: Yeah) 78 04:07.170 --> 04:07.980 And you know what, 79 04:07.980 --> 04:09.750 let me just get rid of this button for now. 80 04:09.960 --> 04:11.430 We don't actually need a button here. 81 04:11.430 --> 04:13.530 I'm just showing you how to style the cool search box. 82 04:13.530 --> 04:14.550 So there's the, 83 04:14.550 --> 04:15.570 the cross. 84 04:16.080 --> 04:17.350 Very, very cool. 85 04:17.370 --> 04:19.320 It's a bit close. 86 04:20.430 --> 04:21.480 It's a bit close. 87 04:21.690 --> 04:22.710 Let me give some padding 88 04:22.710 --> 04:24.750 left of 7 pixels. 89 04:25.070 --> 04:25.980 Yeah, it's a bit better. 90 04:25.980 --> 04:29.790 But you'll notice now if the user starts typing, the X disappears 91 04:29.790 --> 04:33.090 but I actually want it to be replaced with a check mark. 92 04:33.240 --> 04:38.490 So all we need to do now, is we're not targeting the :invalid pseudo class. 93 04:38.520 --> 04:42.210 Now we're going to be targeting the :valid pseudo class. 94 04:42.240 --> 04:43.230 Same thing. 95 04:43.230 --> 04:48.180 We're going to be looking at all the div descendants and we're going to target 96 04:48.180 --> 04:54.690 it's ::after pseudo element. Very simple. But now we're going to target, we're going to change its 97 04:54.690 --> 04:55.920 content, right? 98 04:55.920 --> 04:58.920 We want it to be now a check. 99 05:00.040 --> 05:00.430 Let's go 100 05:00.430 --> 05:01.000 here. 101 05:01.690 --> 05:02.110 Check 102 05:02.110 --> 05:02.550 mark. 103 05:02.560 --> 05:07.420 I quite like the first one, and we could just copy this as well, which is quite nice. 104 05:07.420 --> 05:13.510 So we can go into our code and just copy that check mark there. And let's do the same thing with padding 105 05:13.510 --> 05:14.170 left 106 05:14.320 --> 05:16.810 so it's just consistent - 7 pixels. 107 05:17.020 --> 05:17.970 And here we go. 108 05:17.980 --> 05:23.560 If we look at our site, we start typing, we get a check mark! (sound effect: mission completed) 109 05:23.890 --> 05:24.910 No ways. 110 05:24.910 --> 05:26.320 How awesome was this? 111 05:26.350 --> 05:31.600 You can just see how easy and intuitive it starts becoming to style your own form widgets. 112 05:31.690 --> 05:37.420 And trust me, a lot of designers, a lot of developers don't take the time to do these little, you 113 05:37.420 --> 05:41.200 know, these little things that just make a big difference to user experience. 114 05:41.200 --> 05:45.790 And you can see a lot of the techniques we are applying, you know, targeting the :valid pseudo class, 115 05:45.790 --> 05:49.780 the :invalid pseudo class, using the ::after pseudo element ... 116 05:49.810 --> 05:53.950 a lot of these techniques we use over and over again for different form widgets. 117 05:53.950 --> 05:55.810 So, don't be intimidated. 118 05:55.810 --> 05:57.910 I hope it's starting to become more intuitive to you. 119 05:57.910 --> 06:00.800 But enough said, Let's move on to the next lecture.