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

3.1 Styling Text Inputs

Welcome back to the course. In this lesson, we're gonna begin styling a very simple form kit that I've put together in Figma. So let's start with the text inputs. This is the kit that will be styling and you can find a link to this Figma file in lesson notes. These are the text inputs, and I've made a couple different versions here. This is a required Text input. This is one with a label. This is a Disabled it input. A Read-only one. And this is one that shows two different states for invalid and valid. This one here shows how a select element should look like, but that's coming up in the next lessons. These are two checkboxes, one unchecked, one checked. We have some radio buttons. We have a button, and then we have some different states for elements here. Here's how the hover input focus imput should look like. A select on hover and also how the hover state should look like on an option. And then the hover and focus for checkboxes, radio buttons, and also hover and pressed for the buttons. You can also find a frame here with all of the color variations that I planned on using. So let's focus our attention on these text inputs. Right here in CodePen, I wrote the HTML. I have a simple form fields set. And then for each control, I have a paragraph as its parent. And then labeled the actual input or the control. And then a span class helper, where it's necessary. And we can use this span to add helper text, like required, or in some cases we can even display error messages. And as for the fields, we have a Text field, a Disabled text input, a Read-only text input. An Email field, Textarea, and then Checkbox, some radio buttons, a select, and some buttons. As for the settings in CodePen under CSS, I am using SCSS to speed up this process a little bit. I'm using the Normalize reset file, and also Autoprefixer to add all of the necessary vendor prefixes automatically. So let's go ahead and open up the CSS. Here, I defined basically all the colors that define in Figma as variations. So, for example, gray-100 is a base color. Gray-110, 120 or what's above that are shades and what's under 100 like 90, 80 and so on are tense. I have variables for red, green and white. And I'm doing the same for blue, which is this, and purple. And then on the body element, I added just some demo styles like a background color, I set the font family. These are not important for styling the actual inputs. I set a different style for the Fieldset & legend, this one here. And I added some quick fixes for typography like font-family, font-size. And also on the Paragraphs I set a margin-bottom of 32 pixels, so I can get a bit of distance between these elements. And also position relative, you'll see why in just a little bit. So let's begin with the inputs. I'm gonna start by targeting the various types I'm using. So type text, email, I'm also gonna add password here, even though I don't have it set in my HTML just yet. But it doesn't hurt. And textarea, and we'll begin with this. Let's add a border to all of these. So border: 1px solid, and we'll use the gray-120 color. Next, let's change the background of these inputs. So background, we'll use a gray-100. Let's add a little bit of padding 24 pixels. And I'm using pixels here just for clarity, just to make things a bit simpler. But normally, on a live project, I would recommend you use either Ns or rems. And let's change the color of the text inside these inputs. So color, let's go with a gray-10, which is a very, very light gray, almost white. What else do we have here? We have a border radius on all of these of 5 pixels. So let's go ahead and add that border. Radius: 5px, and what else? Taking a look here, notice the labels are kind of positioned inside my input. They're right above the input value. So to do that, we must first push the input value down a little bit. And we can do that by setting padding. We'll do 32 pixels on the top, 24 left and right, and 16 pixels on the bottom. And we can actually go ahead and delete this padding right here, because it's redundant. Now, on some of these labels, you will see that I have a class of inside. And that's because I want to differentiate the labels that look like this from the Checkbox and Radio button labels that look like this. So let's go ahead and style those labels. So label with a class of inside. We'll do this position: absolute. We'll do left 24 pixels. So I wanna match the padding on my inputs. We'll do a top of 12 pixels. And I'm gonna lower the font size to 13 pixels. And I also gonna change the color to a nice gray-70, okay? So now we have the labels here, and then the actual value of the element. Here, and this is where the position relative comes into play, the one that I added to the form Paragraphs. That works with the label position absolute. Because if I didn't have this, my labels would be positioned a relative to their immediate parent which is the body element. And it would be a big mess right here in the corner. But by setting position relative on the Paragraphs, the labels have a position absolute relative to those paragraphs. Which places them. Exactly in the right spot. Now, let's start from the top. Here we have a placeholder, and I added that placeholder by using the placeholder attribute on the input. Just like that. Let's style this a little bit, because we can actually target these placeholders with this pseudo class placeholder. And we can change their color, let's say grey 70. And we can also change their font style among other things, of course. In my case I want Italic, because I want to differentiate the label from the actual value of the input. I mentioned a required field. And it's this one right here and I just did this one as a demo, but you can add the required attribute on any input. And basically, this will help the browser do some proper form validation before It's even sent to whatever page you want. So by adding a required, you're basically telling the browser, hey this field must have a value. And because we added this helper span here, we can target it and do this. So required + span with a class of helper. And we'll target the before pseudo element. We'll say content required. And let's also do color, gray 70. And let's also go ahead and style this helper a bit more. So span helper before. Let's display this as a block, so it's under the input. Let's lower the font size to 13 pixels. Let's add a bit of distance between it and the input, let's say 8 pixels. And let's also make it Italic, perfect. So now, every field that has an attribute of required, also gets this little helper text right here. Now let's move on and style the disabled input. Disabled basically means that you cannot interact with it. You cannot type anything into it. So, let's go here and say, all the elements here that have the attribute of disabled, should have a slightly different background color. Let's say grade 110 and also color, grey 70. What about the read only. Let's copy this, and read only, you can target it like this. And in here, I'm just gonna change the background color. Because I want this value, to be displayed as a normal value. It should have the same color. The difference is, this can be copied, it can be selected but you cannot type anything in this read-only input. Now, since we're on the different states here, let's target the hovering focus states. So hover hocus, for these we will simply change the background color to a grey 110. And let's also add a transition. To these elements. Let's do all, we're gonna be lazy here. 2.02 seconds ease in and out. So now, we get a nice transition when we're changing the background color on hover. Now on focus, let's check it out, on focus, we need to change the border color as well. So, we'll say border, one pixel solid. And we'll change this to green 90. So now, when we focus an element. We can see that it changes its background. It's a border as well. And let's also do for WebKit, we'll say outline to none to get rid of this blue Halo that you just saw. And also here, since we're on the focus, let's also do this. We'll do MS clear display none, and this is for edge, this is for WebKit. Okay, this is for another characteristic that's being displayed on edge browsers on focus. So we're getting rid of it. I don't have an Edge browser here to show you. But if you're using Windows and you're previewing this, you'll be able to see it. Now, let's also target these three input types, and change their height and width. So for width, I'm gonna say 320. And for height, I'm gonna say 64 pixels. So these are looking very good. What else do we need to do? Lets see, we got all the visual characteristics, we got the required text, disabled read only. Now we just have to handle the valid and invalid states for these inputs. So for this, we're gonna be using a very simple technique, we'll add a background image, depending on the state, and we're gonna use these two elements and coded as an SVG. So that's actually very simple to do. We'll go here and we'll target the invalid state, and we'll do the following. We'll open up this SVG to base 64 conversion tool. It's on base 64 Guru, and then we'll go to figma. I'm gonna select both of these icons, export them to SVG. And, that created two files here, a vector, which Is the x m vector 1, which is the check mark. So then, I go back to the tool. I make sure data type is local file, choose file and let's select this vector which is for invalid. Make sure the output formatted CSS background image, And hit encode SVG to Base64. So now, all we have to do is copy this. Paste that in. And notice that my invalid field which is email, is now just plastered with with those x's. So, just to test this out, as soon as I enter a valid email address, the invalid state is removed thus the background image is removed. As soon as I go back to an invalid. Email address, that background image is re-applied. Now, obviously, we want a single x icon displayed somewhere here. So here's what we'll do. We'll target both valid and invalid because they'll be using the same properties. And I'm gonna set background repeat to no repeat. And I'm gonna set a background position too or write 24 pixels and center. And let's also set a background size to, let's see how big this icon is. In my design, it's 16 pixels. So let's do 16 pixels. So that perfectly positions this x image to the right, and in the center of my input, does it work? Yes, it does. Now what about valid input? Well, we'll do the exact same thing. We will say valid. We'll go back to our tool, choose our check mark this time, make sure the output format is correct, encode SVG to be 64. Copy this CSS code, paste it in here. And now, we can see that the valid state applied that style to all the other inputs. This is invalid because it's a required field but as soon as I type something in it, that check mark is displayed. Same goes for this bit. So let's do a save, let's do a quick check in both Chrome and Firefox to make sure everything is working properly. And it does. Nevermind this icon here. It's for an extension I'm using, but it's there. You can see the icon changes correctly. So this is in Chrome and Firefox. You will see that it is working. Except Firefox, because it has a different Style sheet, it adds this red border around an invalid item. And actually this is not a border, it's a box shadow. So on invalid, we're gonna say box-shadow: none, and this is for Firefox. So now save, we'll do a refresh, and that box is now gone. Now, we can see that we have this check mark on the text area as well. This is not necessary. And, it's not necessary because, what do we usually put in text areas, large amounts of text, right? And there's usually no validation going on there. And if it is, it's usually more complicated than what a browser could offer us. So, we're going to remove this checkmark on text areas. Very easy to do. Text area and we'll target valid and invalid, and I'm simply gonna set background image to none. So now this check mark or x only appears in the correct input types. So with that, we've created or we've styled all the text inputs and text areas that we need. All right, the text inputs are now done. So let's move on to the next element on our list, which is buttons. We'll style the buttons in the next lesson. So, see you there.

Back to the top