Welcome back to yet another lecture.
And now we're going to be looking at the input with type search.
But like I mentioned, I want to add a cool funky design.
I want to have a cross when nothing is entered into that box, and then I want to have a checkmark when
text is starting to be entered. And I'm going to be using the CSS pseudo element selector ::after.
So it's going to be very simple, but I want to do more and more of these examples with you
so you start becoming very aware of how it's done and you'll see it's very, very intuitive.
The first thing I want to do, of course, is create an HTML document.
Let's just zoom in so you can see better.
In here we can have a <head>, then <style> because we are going to be adding styles to our search box.
But for now, let's just start on the actual form itself.
We don't need an action in here.
Let's have our input of type search.
We can have a name of "q" - that's just convention.
An ID we can have is mySearch
for example. We can have a placeholder.
Placeholder ... and we can assign it to the value of search.
We can make this a required input type.
Okay, let's just look what it looks like on the browser.
There we go.
Very straightforward.
And then let's add a button with type submit.
The word submit.
And of course, if the user tries to submit the form without typing anything, we get an error.
So there we go.
Actually, instead of the word submit, let's have search.
Makes more intuitive sense.
And then under the button, remember I said I want to have now a cross when nothing is entered, and then
when it's valid, I want that check mark to be displayed.
So how can we do that?
Well, I'm going to create an empty div here and then we're going to style it.
Okay.
So, firstly let's just have its display property set to inline because by default it's a block element
and I want it inline.
Okay.
So I want to display an X and a check mark to the right of the search box indicating whether it's valid
or invalid.
And you've already seen many examples in this course of us targeting the :valid and :invalid pseudo class.
What's really cool is that they apply to many different widgets and then it becomes very easy and intuitive
to style these widgets.
So it's very, very cool.
So firstly, let's target the input when it's invalid, okay, which is the default starting state -
the user hasn't typed anything, have they?
And then what I want to do is I want to target all the div element descendants, and I'm going to target
this ::after pseudo element, right?
And with this, we need to set its content.
And I'm going to get back to this in a second.
Or actually we could do it now.
I want there to be an X, and how do we put an X in here?
Well, one way is we can use a website,
let me just open it up, called toptal.com.
But I want to target the URL where we are specifically looking at HTML arrows.
And it's a really cool website because it gives us all the symbol codes in HTML that we can use for
our website design.
Let me just expand this.
Here we go.
I want the ... let's do a check mark first.
I quite like this middle one.
Let's click on that.
And we want the CSS code.
Okay.
That's what we want.
The other option, you can either write the CSS code,
you know what I just realized?
We're not doing the check marks yet.
We're doing the cross, aren't we?
So let's start with the cross.
I quite like the first one, let's just use the first one.
What we could do is copy this cross itself.
Or we could use this CSS code entity.
Remember, we can't use the decimal value.
We have to use the hexadecimal value, which is why we have to use 292B. So we can copy this
and we can put that in its content.
Okay.
And if we save this
and we go here, we can see we've got that X, right?
How awesome is that?
(sound: Yeah)
And you know what,
let me just get rid of this button for now.
We don't actually need a button here.
I'm just showing you how to style the cool search box.
So there's the,
the cross.
Very, very cool.
It's a bit close.
Let me give some padding
left of 7 pixels.
Yeah, it's a bit better.
But you'll notice now if the user starts typing, the X disappears
but I actually want it to be replaced with a check mark.
So all we need to do now, is we're not targeting the :invalid pseudo class.
Now we're going to be targeting the :valid pseudo class.
Same thing.
We're going to be looking at all the div descendants and we're going to target
it's ::after pseudo element. Very simple. But now we're going to target, we're going to change its
content, right?
We want it to be now a check.
Let's go
here.
Check
mark.
I quite like the first one, and we could just copy this as well, which is quite nice.
So we can go into our code and just copy that check mark there. And let's do the same thing with padding
left
so it's just consistent - 7 pixels.
And here we go.
If we look at our site, we start typing, we get a check mark! (sound effect: mission completed)
No ways.
How awesome was this?
You can just see how easy and intuitive it starts becoming to style your own form widgets.
And trust me, a lot of designers, a lot of developers don't take the time to do these little, you
know, these little things that just make a big difference to user experience.
And you can see a lot of the techniques we are applying, you know, targeting the :valid pseudo class,
the :invalid pseudo class, using the ::after pseudo element ...
a lot of these techniques we use over and over again for different form widgets.
So, don't be intimidated.
I hope it's starting to become more intuitive to you.
But enough said, Let's move on to the next lecture.