Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:11Length:1.4 hours
An introduction to styling html forms 400x277
  • Overview
  • Transcript

3.5 Styling Select Elements

In this final lesson, we’ll style the most complicated form widget of all: the select input! Let’s begin.

Related Links

3.5 Styling Select Elements

Welcome back to the course. In this final lesson, we'll try and style the most complicated element on our list, which is the Select. So let's see what we can do with it. We begin here in CodePen by referencing the Select element. And let's take a quick look. The top part or the actual select looks very much like an input with the same colors, rounded corners. The option group or the list of options is different here. But let's begin with the actual select, right? We have the value here and we also have this little arrow on the right. Let's go ahead and export this as an SVG because we will be using it as a background. So let's load it up here, and let's encode it. We'll come back to this in a little bit. But select for now, let's do this padding. We have 24 pixels pretty much everywhere, except on the right side. Okay, because we want a bit more extra space for that arrow. So there, we're gonna use 48 pixels, but 24 the rest of the way. Let's give it a width of 320 pixels so that it matches our inputs. Let's set a border radius 5 pixels. Let's add a border. 1 pixel solid, gray 120 and a background of gray 100. And let's go ahead and copy this URL here with the icon, with the drop-down icon. Great. Now also, we gotta set background repeat to no repeat. Background position, we'll set it to right 24 pixels and center. And let's also set the background size to start with 16. Let's go 12, I think that looks just a little bit better. Now let's change that black color for the text and we'll do gray 10, and what else? Let's change the cursor to pointer. Let's do the hover and focus states. Because if you remember from the Figma file, we do have a slightly different style on hover. So hover focus will change the, background color to gray 110. Okay, let's see what else. On focus, let's get rid of this blue border. And let's add our own border, so focus border. It's gonna be 1 pixel solid. Gray 90, and outline, none. This is actually for WebKit. Let's also add a nice transition here. All .2 seconds, is in and out. And to complete our styling, we're gonna do this, MS expand display none. This is for hiding the default arrow on the select on some older browsers, particularly Internet Explorer. Okay, this has nothing to do with WebKit or Firefox. It only affects Internet Explorer. All right, so, let's see what we got. Here's the Select, and this is the option group. So notice that by changing the background and the color on the select, we also affected the background and the color on these elements. Lets see how it looks like on Firefox. So this looks good, the select. And the option group looks different. We're still getting the same color and background, but we have no border. There's no rounded corners. There's no padding like we had here. And also here, notice that we have this translucent effect, on the background, we don't have that in Firefox. What about Chrome? Chrome is the same as Safari. Now if you were to check this out on Microsoft Edge, for example, that will look different. It would still be the same background without this translucent effect though. And the text will have the same color or the correct color, but it would be displayed slightly different. And unfortunately, this is where we have to stop with the styling for our select. It's as far as we can go because we do not have access to these elements, to the options. We cannot affect the padding inside this box. We cannot affect the border, the width, the height, none of that. This is strictly now styled by the browser. And this is one of the downsides of using the standard select element. You're pretty limited if you want to style it completely, right? We can style the Select element just fine. But when it comes to the option group here, we are very, very limited. Now the only way to get around this is to build a custom select widget. That's beyond the scope of this course. But I did include a few links to some tutorials on how you can do that. So make sure you check those out. But for now, know that this as far as you can go with styling a select element. And with that, our simple form kit is complete. That wasn't too hard, was it? Once you know the foundations or once you prepare the foundations and you know which properties can be affected, it's pretty easy to style these forums in pretty much any way you want. I went for a slightly more conservative approach for these. But you can really do some crazy things with CSS and forms. There might be some small consistencies between modern browsers and older browsers. But that's what it is, you can't really do anything about that. So if you wanna support those older browsers, make sure you test these form designs in as many browsers as possible. All the links to the source files to CodePen and Figma are listed down below, so make sure you check those out. And with that said, I wanna thank you very much for watching this course. I'm Adi Purdila and until next time, take care.

Back to the top