Styling Select Elements

[00:00:00]
>> Kevin Powell: Next up, we have our selects that we wanna style before we can keep on going up here, so we'll finish up with this section. So I'm gonna jump on over to the mushroom guide here. The first thing I'm gonna do is I noticed everything is really glued together.

[00:00:12]
So inside my wrapper I am gonna do a class of flow.
>> Kevin Powell: We're gonna collapse this down just cuz it takes up so much room and close that div, just to give us that flow spacing we were doing. Again, if you decided to put that flow on the wrapper, you'd have the same result here.

[00:00:33]
And if you collapse everything down, it's just adding the spacing. We have the h2, we get the spacing, that's no spacing. But it's adding the spacing on top of the selects, and then it's adding the spacing here on top of the grid that we have right there. For these selects, we do wanna do a couple of things with them.

[00:00:49]
We need to change what they look like. If you're in different browsers, these will look a little bit different, styling an actual select right now is something that's not very easy to do. The select that we see here is fine, it's the options inside that you have basically no control over.

[00:01:03]
There is work going on right now to make selects styleable. Originally, we were gonna have a Select menu, it was gonna be a new element. Now they're just giving us, I believe, it's new pseudo class instead that we'll be able to add. I think it's only supported in Chrome Canary right now or it might be in Chrome behind a flag, I'm not sure, it's really experimental, but we will have styleable selects in the future.

[00:01:24]
So if you're watching this, you could look into that. But as of the time of doing this, we cannot do anything on the really cool styling stuff, but we can do some basic styling on them. The first thing I am going to do, though, is just put a div here around my selects cuz one problem is they're a little bit too close together.

[00:01:46]
>> Kevin Powell: You'll notice that they're already next to each other, selects are in-line elements-ish. They're sort of like images and other things that go next to one another. But you can't control the space between them. It's either an empty space or they'll be stuck together. So by putting the div around there, we can give that a class, and I'm gonna call this a flex-group.

[00:02:04]
We don't really need this. This is a class I use on most of my projects. In this one, I don't happen to need it except in this one space, but a lot of the time I do reuse this class on lots of different things. We could even technically use it on the navigation.

[00:02:17]
Maybe we could have used it on the tags here as well. But the flex-group, if I come to my CSS, I would put this in my layout layer. I'll put it right at the top where I can do a flex-group is display: flex; gap. It's gonna look, actually, a lot like what we did with our tags.

[00:02:39]
So we could always refactor the tags to use it if you felt like you wanted to. A gap of 1 rem or probably smaller actually, 0.5, and the optional, but I usually put a flex-wrap of wrap on there.
>> Kevin Powell: And let's just see if that. I didn't save my HTML file.

[00:03:01]
So they're both saved. And because we're not changing much, you can always make the gap a lot bigger just to verify that it's actually working. Cuz if you're making a small change to something, you might wanna play with it. Always exaggerate if you're not sure it's making a change, just to be safe.

[00:03:19]
>> Kevin Powell: So with a flex-group like that is basically anytime you need things to go next to one another, have a little bit of space between them, you just throw that on there. Again, it's sort of like a layout utility class that can be helpful in your projects. And with that done, that's in my layout just cuz it's a reusable layout, I could potentially use that anywhere I need in my site.

[00:03:38]
I'm then gonna do a find to go to my components. And in here, I'm going to style my selects and I'm gonna do that down where my buttons were. Just cuz I feel like it's related to the buttons in the sense they're sort of like form elements. So there's the button and going all the way down to the bottom.

[00:03:59]
And I can do a select, and I think I might just do the general select like this. Cuz I think if you had any selects on your site, they're probably gonna look the same. At least that's my thinking. It's rare that you have different styling for them. But if you'd prefer to give it a class like we did on our sections, it's fair enough, you could definitely give it a class as well.

[00:04:17]
And I'm just going to come in. We don't need too much on there, a little bit of padding,
>> Kevin Powell: A background-color,
>> Kevin Powell: The green. So the green is our accent-main.
>> Kevin Powell: The color is obviously wrong. Let's just go look fast, I think my padding is way too big.

[00:04:38]
So, yeah, we need the padding, the color, I think the font is already okay.
>> Kevin Powell: So the padding is a bit too big. The border: 0, will always take a border off, whoops. Border-radius, probably, the 2. And the color will be the high-contrast.
>> Kevin Powell: One thing you'll notice is the positioning of the little chevron is not where it is in the design.

[00:05:09]
If I do this, I'll just shrink this down so if people want to see the code a bit more. But the chevron's thingy, the drop arrow, isn't position the same way as it is in the design here. It's very similar, might be a little bit off. Or you don't have control over where that is.

[00:05:25]
That's part of selects not being stylable. And I'm in Chrome right now, so this is what the options look like. If you're in another browser, it will look a little bit different. It's at the system level, so the highlight-color could be different. Firefox, Safari, they all will look slightly different from what you see here, there's nothing we can do about it.

[00:05:42]
You just live with it, but for me this is completely fine with how it's styled. I don't think it's worth stressing about or coming in with a custom look for this. Cuz the advantage with using the built in elements, if you don't need very specific styling is they're keyboard accessible.

[00:05:58]
So if I push Space, it opens it, and I can use my arrow keys to go between them. And then I can select one of them with either pushing Enter or, yeah, select one by pushing Enter there. Rebuilding that behavior in there where the right keys are opening, closing, selecting things.

[00:06:15]
If you wanna build a completely custom one, is quite a lot of work. So it's always one of those things of balancing out, is it worth coming in with something completely custom? Sometimes you have to do it, but for now or for this project I think this is completely fine.

[00:06:29]
And the last thing on that note is, if you did want a custom chevron or something there that actually moves or turns, you could technically do it without any thing too fancy. But it would require you coming in and wrapping the select in a div. And then you could use a pseudo element as the dropdown arrow.

[00:06:47]
Because you can't put a pseudo element directly on a select, it won't work. You have to have an outer div. All the stylings on the outer div, you try and strip as much styling away on the select as you can and you sort of style it through the other thing.

[00:07:02]
So it becomes a lot more work just to change the little drop down to make it consistent from one browser to the other. So, again, that could be something you could do as a progressive or an enhancement once we're finished with this project, if it's something you'd wanna dive into.

[00:07:15]
Here's the blog post, it's linked in the lesson about feedback for customizable selects. Cuz it's really early, early days right now. And the CSS Working Group's doing this a lot, whereas, if they have a proposal, they build it into one of the browsers so people can play with it, and then they ask for feedback.

[00:07:30]
Is this what you want, does this work the way that makes sense and all of that? So how they're doing it? Yeah, they're giving us this pseudo element picker function thing. So you could actually style things the way you'd want to. This is a long way away from where we are right now.

[00:07:49]
But if you're interested in it, it is in the course notes if you wanna read more about it and give your opinion on it. Cuz they do need our opinions when these things are happening.