Welcome back.
Let's keep going, what do I want to do now?
We've just done radio buttons, but now I want us to look at an alternative to radio buttons...
I want us to move entirely away from the input element.
Up until now, we always used the input element to define what kind of form widget we want.
But, I think you're ready now to move away from it.
Are you ready for it?
It's going to be the <select> element.
It's kind of a drop-down menu, if you will, and it works similar to a radio button in the sense that
it allows the user to select only ONE item in the dropdown ... actually it doesn't have to be that way, which
we'll see later in the course.
But for now, just think about it intuitively that way - it's just an alternative to a radio button.
So, how does a <select> element work?
It's very simple.
We just have a select HTML element, and within that we have options.
And of course each option is an item in the dropdown.
Enough said, let's jump to the console, or let's jump to the text editor, let's start coding. 👩‍💻
Let's go to our IDE...
and first, we need to type its HTML
right?
Here we've got our radio button.
Let's copy that.
Remember, it's always good to label your code.
And now we're adding our...
dropdown menu.
How do you eat an elephant 🐘? One bite at a time 🤣
How do I want to do this?
Well, firstly remember how I said we should always wrap whatever widget we're creating, in a wrapper.
And if we scroll up, we did our first wrappers in a <div>, with class of "form-row",
"form-row"...
so why don't we do exactly the same?
We create a <div>, and we have a class of form-row. There we go. Now, the first thing I want to do is I
want to give it a label.
And this is just going to be a color label.
We're going to also user to pick a profile color, for example.
We save this, and go to our browser, there we go - "Pick a profile color". And because we've given it the same class
as our other input elements, man, it just looks beautiful
straight off-the-bat 😍. The styling is automatically applied. How cool.
So there we go.
There's our label, and then what, of course, we want to do is we want to include this <select> element.
We're moving away from the input element. How cool. The name we can give this select element is color...
and of course, the ID has to match the "for" value on the label.
So we have to give it an ID of color.
Now, within this select element, is where the items in the dropdown happen. If we go to our browser right now, we...
can see there's a dropdown, but nothing's in it! Pretty useless 😫.
So that's exactly what we need to do now.
And in order to do that, we need this <option> element.
And as you would expect, these are all the options, so let's do blue. Let's just do a few more.
We can do...
green
green...
red, red...
yellow...
yellow. I just want to delete the other one, because I think we've got enough - you've got the point
already. And this is literally it. If we got our browser, we now have a dropdown.
So there we have it ✨.
We've just done our selection...
our dropdown.
What do you think?
Do you think it looks cool?
What do you think, Gerald?
"Hello, Clyde.
I'm not impressed.
It looks ugly."
Gerald's right...
it looks terrible 🤢.
If you look at this dropdown, this is default styling applied by the browser and it just looks out...
of place.
It doesn't look attractive at all.
And that's a point I want to make...
that dropdowns are notoriously difficult to style. And there's good reason for that.
It's quite a complex UI component in the browser.
For example, when a user approaches a dropdown, a select element, on their phone 📱, each phone manufacturer
has a different way of displaying the selection types in that dropdown.
You know, with an iPhone 📱, with my iPhone for example, whenever a select element is encountered,
the phone brings up a unique UI scrolling element that allows me to navigate through each item.
But that's not to say we can't style this.
We are going to style it now...
it's just a bit more difficult than usual.
So, let's start styling this very quickly.
Let's go back to our text editor. Let's go to
styles.css file...
let's starts styling this now.
This is radio button styling, so let's copy that heading, scroll down...
and this is not radio button anymore, this is...
dropdown menu styling. Like I mentioned, it's always good to label your code. Now, for the reasons I just mentioned, it's always
a good idea to let the browser device determine the best way to present a select element.
So I'm going to keep our...
CSS very, very simple.
Unfortunately, even the simplest things are surprisingly hard.
But, you know, this won't be that difficult...
you'll see...
you'll see what happens nw.
Um, all we want to do is we want to target our select element.
We know we gave our entire wrapper a class of form-row, and we want our select element.
And all we're wanting to do, is give it some padding, and we want to change the font-size. Let's change it to
font-size of 14px. Let's go to our browser, and already that looks better.
And I'm keeping it very simple...
I don't want to get complicated with more things because like I mentioned, even simple changes to this...
requires a lot of hard work.
We haven't done hard work, but we haven't really changed the styling much, have we?
That's the one thing I wanted to do.
The other thing I want to do, is I want to increase the width, right.
If you look at the name and email, it's a certain width. I want to do the same with this dropdown.
How do you do that?
Very simple. I'm going to scroll up here...
and we've defined, you know what I'm going to do...
let me not go up. Let me keep all our styling for the menu within its own little section here.
So all we have to do, is we have to then again start at the...
actually you know what, all I have to do, let me do it right here. I'm just gonna ... I think this will work... 250px, let's see...
if that works.
Oh, perfect 💯.
That was actually the most simple solution. I was making it more complicated than it had to be.
So there we go...
there is our first dropdown menu that we've created together.
We've got a lot more coming in this course.
Hope you're learning a ton.
Stay motivated...
grab a coffee ☕ and I'll see you in the next lecture. (swoosh)
Actually, you know what?
"You are silly". What's that Gerald? "Don't hard-code the size". Gerald is right.
I did something very silly.
If we go to our code here...
I defined the width as 250px, but we've defined a variable at the top.
So I think we defined it as --widget-width.
And if we save that, and go to our browser...
it's the same thing.
But at least now, if we change our variable width in one place, all our widgets will be exactly the same.
So, now this is for real...
now. I'll see you later.
Stay motivated.
I'll see you in the next lecture.