Form Styling Essentials | The basics to modern CSS tips & tricks

Key Takeaways

Hello, my front end friends. When we're styling up a form like I have here, where I just have a nice form going from here to here, the very first thing I'd actually recommend is just having divs like this one right here, where we're putting things inside of form groups. And doing this is just going to enable things to be a lot easier to be styled and organized and everything else. The alternative here is actually to include the input inside of the label, which is allowed. And then you don't actually need the four attribute on there cuz they're going to be linked together. But it does make styling things a little bit harder when you do that. You can definitely get away with it, but I just find this type of pattern, which is probably the most common you'll see out there, is the easiest way forward. Now, if you'd like to follow along with me on this one, I do have a little bit of styling already done, but we're going to be really focused on the form itself and not the other styling here. Uh, so we're starting with this pretty blank slate in our CSS to jump into the rest of uh what we're going to be covering today. And one of the very first things I'd actually recommend that you do, and this could be as part of a a reset or something else like that, uh, is your input. You can also include your button. You can include your select here. So, your text area as well. Anything that would be part of your form stuff. Just doing a font inherit can really help. Cuz if you look at this send message that I have down there right now, you might not realize it, but it's actually the wrong font. And as soon as I do an inherit on there, it got bigger. The sizing of things improved. the same with my inputs because the font size for my body wasn't inheriting and the font family wasn't inheriting. So just doing this makes a really big difference and just helps push you in the right direction cuz if you switched over to a saser font, you might not have realized that the font properties weren't inheriting like they do everywhere else, which can be a little bit annoying. There can be an argument made for also including color inherit here, but I tend not to do that. But if ever you feel like it's just a nice quick win, uh you could definitely do a color inherit on that as well, just so it all of our form elements behave more like regular elements. And the next thing I'm going to recommend is on a the form itself and maybe you have a class here or something else like that is to come in with a display of grid and not a display of flex. And the main reason for that is in general you'll have a little bit less work to do, especially if you just want a stacked one like this. So if I just add a gap here of one rim, now I get some spacing coming through on these. Uh so it looks a little bit better. I'm also just for visualization purposes, we'll change this back after, but on the inputs, I'm going to give them an accent color just to make them stand out a little bit more. Uh and then we'll tone it down later on. But I think for the demo, this helps out a little bit. Uh, so yeah, I I do think using a display of grid on the form itself can definitely help out. The one thing you do want to watch out for if you do this is you can see my button is now stretching the whole width across. The reason I like going with grid though is it means if I do want to change my layout here at all, I don't have to worry about extra markup or anything like that. Right? So if I do want this at large screens to be two columns, I can come in with a media query. So we can say media and we'll say a width is greater than I don't know 728 pixels and then we can say a grid template columns and we'll just go up to two columns. So I'll do a 1f fr 1f fr and then I get my two columns coming in and then if we do this at smaller sizes it goes back to one column. So we go from 2 to one. Now the layout's still kind of really wonky and problematic. We'll fix this up a little bit uh as well but just nice quick win right there. And again, the nice thing with this is I don't have to worry about wrapping extra divs around things to make columns or change the order of things or other stuff like that. We do have flex wrap as well. I just find this is a little bit easier to do. And while we're on the topic of a display of grid here for the form itself, I'd also recommend using a display grid for the form groups. This one you can make an argument for flexbox if you want to keep them one next to each other like we have right now. But I find most of the time you have the label on top and then the input will go underneath it. So we can just do a display of grid on this and then I can use a gap of like a.5 m or something like that if I do need some extra spacing coming in. Though in this example I think we don't really need that extra space there. The advantage of doing a display grid here is you can see with one line of CSS now my inputs are actually taking up the full size of everything. And I know there's some broken stuff down here. We'll fix all of that in a second. But now we have this full width coming on all of these and I haven't had to do very much on that. So nice and simple, just a few lines of CSS is really pushing us in the right direction right now. Now there is a weird thing with inputs that you might have run into before is when we can actually get some overflow happening here at smaller sizes. And let's just switch this. I'm going to take my media query off to highlight this even more where we're always going to have two columns. And you're going to see now we're going to get some overflow happening here. And that's because inputs by default have a min width on them, which is kind of weird. Uh or minimum size that's sort of set on them. So there's a few different ways we can overcome that. Uh I've seen a few arguments from people saying, should we do something where with like a star and then setting a min width of zero because that would actually prevent that issue from happening if we did that. You can see now they're able to shrink down. This though is really dangerous to do and I have a video where I go more in depth on that. So there should be a card popping up and I'll link it in the description as well. But this can actually cause a lot of really strange issues with text overflowing in weird ways that you wouldn't expect. So I wouldn't recommend this as a blanket rule. If you really want to do this, you could target the specific things where it actually is an issue. Or in this case, I'm just going to go on my regular input selector here. And you probably don't want to do this on all of your inputs anyway, but only the ones that are causing problems. But we could just come in and say it's a width of 100%. And the advantage with that is now they're just going to match, especially in grid. They're going to match the width of the column that they're inside of. And we're getting two squished here, but you wouldn't want two columns anyway. So, let's bring the media query back here. So, now with my media query back in there, we can see that it goes to two columns and then jumps back down to one. And everything is working fine because when we have something set to a width of 100% that's the child of a grid item, the 100% is relative to the size of its cell. So, that fixes all the problems we might run into there. Now, I have run into a bit of a problem over here with my layout when we are in this two column layout. Uh I don't know if I would actually want to go to two columns. I might just leave this as a single stacked one. It looks really bad with this color here. But if we go back to my surface uh two, it'll look a little bit better. So, if you're just going for a layout like this, there's no problem. We're going to fix our text our checkbox here. And I'll even show you why this is happening over here. Uh but let's go back to having my two columns with my media query here, just so we can actually fix this. And if we go and take a look here, what I've done is I have a form group that has my type of checkbox. It has this label of privacy and these other things in here. And in this case, I could specify I didn't even put parentheses around that one. My mistake. Uh but on this one right here, uh there's a few different things we could do to target this specifically. We could use an nth child. Uh we could do a few different things to actually pick this. And maybe my button, I don't actually want it to stretch the entire thing. So I actually want to select both of these really. So what I'm going to do is come down here uh where I have my input and there's the buttons easy. So uh but for the the one that has this checkbox which I definitely want it to stretch across the entire thing. What I would do for something like this potentially it depends on how comfortable you are for the browser support of this but has really good browser support now. So what I could actually do is a form group that has my class of fine print. And just to look at why this is actually going to work before I do it. If we come back here, I have a form group and inside of that form group. So if I look at these here, one of those has a class of fine print. So I'm selecting the form group that is for my fine print. And there's other ways you could do this. You if you have access to the markup, you could obviously come and change uh something there. We could have a span all class or something like that. Cuz what I'm going to say here is grid column is going to be a 1 over1. And now when I do that, it's actually going the whole way across. Let's just add a background of red here so we can see it. You can see it's going from one side to the other. It's really important we use the 1 over1 here. And the reason for that is when we go down to one column, we still we don't want it to like add extra columns. And if I said 1 over3, it would actually be adding an extra column. We're not going to see it right now, but you can see my my column sizes are actually a bit wonky if I do that because you're actually going to see when I get to smaller sizes, we're creating extra columns. And the columns are wonky and there's issues coming up now. And that's because if I said the one over three, which works at the large screen sizes where we had three line numbers, but let's go and turn on our grid here really fast. I want to turn on this one right here. And you can actually see I have two columns coming in where we have a line one, a line two, and then a line three being created. Because I'm telling it it has to go to line three. the browser goes, well, I need three columns or I need two columns to have three grid gr grid lines. So, it's going to make an extra column when I do this automatically just to account for that. And then these inputs are going to go into those columns. So, at large sizes where I declared that, that's fine. But when I get to small sizes, I don't want that to be there. Whereas saying negative one, it just means go from one extreme on one end to the other extreme on the other end. So, if I have one column, it's going to stretch that full column. But when we go up to two columns, it's going to stretch across both of those. And if I went up to three or four or five, it's always going to take up the full width of the parent. So, we can turn off my dev tools now. So, we have something that looks a little bit like this. Obviously, it looks a bit funky right now, but if we took off the red background, it doesn't look too bad. Uh, I think it looks all right like that. My send message looks a little bit weird. So, for something like this, I might actually say form button. Or if I had a class on this button, I might select it. Or this is my contact form as well. So, contact form. I would probably want to be a bit more specific about this just cuz I wouldn't want this necessarily applied to all of my buttons, but something like this to me makes sense where then I can say an align self of start uh and actually not align self. We're in grid. So justify self actually works and I can line it up there. Or if I wanted it all the way on the other side, which I don't want to do in this case just because I think it's going to make the layout look a bit funky with the text that's here. But if I did want to line it up on the other side, I could just use my grid columns that we saw before where I'd come in and say grid column of 1 overgative1. So it doesn't create any extra columns, but it gives me the whole space on the bottom to work with. And then here we could just do a justify self of end instead. And we could have our button over on this side, which is quite common depending on the layout that you're working with. And just once again, now if we're at smaller sizes, we're perfectly fine. And at bigger sizes, it's also working. So, it doesn't matter how many columns we have. We're using the same trick right there. Cool. So, I'm actually going to turn this off, though, because I don't want that for my layout. And I'm going to do a start here. And I want to fix this up cuz my checkbox is in the wrong place, which is no good. So, we're going to do a few fun things here. And this is where, like, you might be saying, uh, if you know me, uh, I am a big fan of grid and I use grid for a lot of things, but this is a good use case for using flexbox. So what we're going to do is let's come back here where I'm looking at my fine print and I want to specify this form group anyway. So this is perfect where we're going to switch this form group to be a display of flex and hit save. And you can see that's sort of fixed things but it's caused some other problems uh while we're here because of the way the flex is working on this. And the reason this is happening is because I did a input of a width 100% which is probably a little bit not the smartest thing in the world to do. Uh, so this is being caused because all of my inputs are now getting a width of 100%, including my checkbox. So the two options really here are instead of saying input of 100%. Is we could come down and we could list out all the ones we want. So I could say that the type is equal to text and then I could also say we have an input type is equal to password. And you'd have to go through and list all of the different ones where you actually want this to apply. And depending on what you're doing, that might be completely fine. You might have, you know, in this case, I don't have very many that are there, but I do have quite a few cuz I have my uh type of telephone, my type of email, my type of text. I don't have a password in this case, but it's still a long list and it could be quite a bit longer. So sometimes the easier is actually to work the other way around. So we could say that we have if we have an input and then say not and in here list the ones we don't want. So we could say not type is equal to checkbox, and we can put another one here. We'll say type is equal to radio. And if you had other ones you'd want to include in here, you could add those as well. Uh just to make sure that only the ones you want are not getting it. And I find it's a little bit easier for certain things to work this way where we're working in the negative sense instead of in the positive sense. And then here we can say this is a width 100%. And now you can see my checkbox isn't being affected by that. And let's just turn off this display flex that I added before. They were stacked. And now bringing in that display of flex works how you'd expect it to where my checkbox ends up over here. And then we just have my text coming right after it. And we want a space between those. And for this space, a nice little bonus tip here is on my gap, which I'm going to use instead of trying to be like 10 pixels or one ram or something like that. A really nice unit to use here where we're dealing with sort of a string of text and we want some spacing on there. And it depends completely on your design and everything else, but you can come in with like a 1CH. And that 1CH is one character wide. So turn that off. We can see it's stuck. And then I can come in with my 1CH. And it adds about a character of space. It's a bit wide cuz it's not looking at the space character, which is actually quite narrow. It's looking at the space of uh it's the size of the number zero. So it will also depend on your font. So maybe if you find it's too big, you can even come in with like a 0.5, which might align more with the actual size of a space, cuz spaces tend to be quite a bit smaller than regular characters. And I have another little bonus tip for this area, too. If ever you find the spacing is off that we'll look at in a second. But before we get to that bonus tip, I'm actually going to come up back to my input selector here with another bonus tip. And we're going to come in with an accent color. And I'm going to use my var accent. And before I hit save, you're going to see this is just the the normal blue that we have there. But you might see here if I hit save now, it's actually changed over to my accent color. This is really safe just to put on your input selector. It's not going to work on every single input. So if I look at like my regular form fields here, it doesn't actually have an impact on those. Where it does have an impact are radio buttons, checkboxes, range inputs, and there's something else as well. I'll put a link to the MDM article on them if you haven't seen accent color because it is a limited set of inputs that it works on. But just by putting it on all your inputs, you know it will work. and it gives you a nice little more cohesive checkbox without any real extra work, which is nice. And now for the last tip, what I'm going to do, and this is a not necessarily form related, but I do find it very useful for forms. If we come and look in here, you can see I have my gap property on these, but if you look really closely and see if I zoom in, if we'll see this, we will see it a little bit more. The space between the text here and the top of it, there's extra space that's coming. Same over here, it's not quite as noticeable, but you can definitely see over here, we have this little bit of extra space. The button is the only one that actually butts up and is tight on the top and the bottom. Uh or these inputs are tight on the bottom. But again, I have phone and then I have extra space there. So, while I'm putting a gap of one uh rim here, the spacing is actually a little bit bigger. And this can drive people a little bit bananas. It's not too bad in this situation cuz it's really hard to notice. You could always reduce your gap if you want to be really precise. But we do have a new way in CSS to eliminate these types of issues. The browser support for it isn't perfect, but it's a really nice progressive enhancement because if we have this type of situation for people where it's not supported, it's not the end of the world, but where it is supported, it's just going to be a small little improvement uh in the right direction towards what your design might be. So, to be able to do that, we're going to jump back on over here to my inputs. And we're going to have to do a little extra for this one down here, but we'll do it for all of the inputs at the beginning. And actually, I'm going to leave my dev tools open so we can see this in action. And we'll stay pretty zoomed in because it's going to highlight there. You can see that big space that's coming uh right now. And what we're going to do is we're going to say a text box or actually no, I don't want it on my inputs. What am I saying? I want this on my labels. And I that means we probably don't have extra work to do down here. Uh so just because this is my label here and not my input where there is no problem. And we're going to do is a text box trim. And we're going to say trim both. And I'm going to hit save. And you can actually see now it's actually a lot closer here and it's actually closer along the top. Now if I take this off and we refresh that when I look here and I highlight my text, see the blue is taking up all this space. And this is the space for the extra things like on top of characters. Sometimes there's accents or other things. We have reserve space there. And underneath text, there's always reserved space for descenders like a lowercase J or something like that. Whereas if I do a trim both, it's actually going to remove those spaces and that reserve space on the top and bottom's being eliminated a little bit. And we can be a little bit more specific here where I can say a text box edge. And when we do a text box edge, we choose where we want it to be. So the top I want it to be the cap. So the top of my capital letters and then I want alphabetic for the bottom, which is the baseline. So instead of where the descender space is, it will be the alphabetic. And now you can actually see it's gotten even tighter. So the top top of my capital letters is right where I want it to be. And the bottom right there is lined up exactly with the bottom. So we don't have that extra annoying space that you often get with text. This is really really cool. The only downside with this is if you do have descenders, you want to be really careful with this. But with uppercase labels, super handy. It can also be handy if you want more accurate spacing cuz you will have uh extra space around the text on a button when you add padding. And uh so you can actually see here like the underline is going into my gap as long as well as the lowercase Y there. But I'm not too worried about that. I think visually it's still going to look pretty even. It does mean though that we've eliminated all of that extra space that we had, right? Like now we used grid, but now these are glued together. But that's completely fine because we're already using grid on our form group. We can say exactly how much space we want here. So I'm going to add a gap. And in this case, because it's vertical and it's based a little bit on the font, I can actually come in with like a 0.25. 25 LH for my line height and use the line height of my font to set the spacing of my gap on those. And maybe you don't want that. Maybe you want a pixel value or whatever you want. But I like working in relative units. And if I'm working on the vertical height, working on with the line height seems to make sense. So you could also do something like X for the X height, which is the height of a lowercase letter. Or you could come in with a cap, which is maybe a bit more like based on it's based on the capital letter height. So maybe in something like this that makes a bit more sense and we say it's half the height of a capital letter instead of uh worrying about what the line height is. So I think I'm going to stick with that. Half the height of my capital letter will be my space underneath my label. And now I know all my spacing is very consistent and completely controlled how I want it to be. And there we go. And there are your form tips. So I really hope you enjoyed this video. If you'd like to learn about some CSS that you can write that would improve the user experience of your forms, I have a video that you might enjoy right here. And with that, I would like to thank my enablers of awesome, Andrew, Simon, and Tim, as well as all my other channel members and patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.