Style a Form with Plain CSS
Forms and interactive DOM elements are the fundamental building blocks of an application, but that doesn't mean they need to look like every other form on the web. In this lesson, I'm styling a simple input form to drastically change the way it appears without making any unnecessary changes to the DOM itself.
[00:00] Now, that we've styled our list we need to go ahead and style our addTodo form. I was getting sick of adding todos just to be able to see the styling on that list. I went ahead and I'll uncomment this, but I went ahead and added just after it instantiates the store and gets that all set up, it dispatches a couple of events where it's adding todos and then it's toggling the first one.
[00:21] We can change that if I want to toggle the second one. That way every time that I'm messing with the CSS I don't have to go ahead and add todos just to be able to see if that's still working correctly. To be able to style the form we first need to be able to get to it with a class.
[00:43] Using span again, we're going to call this our addTodo. Here we need to add a class name as well. We're going to call this our addTodo, which is the block. Then we're going to put input, which is the element of that block, and then we have one for the button, as well.
[01:08] We're going to say class name, addTodo button. We're going to need to style this a lot, because our form looks nothing like our design. If we look at our design, this could potentially be a button. Then we've got just a big giant input there with some placeholder text.
[01:32] We're going to try to avoid changing the DOM at all and just do as much as we can with styling. We will, however, need to change the input to be able to include placeholder text. We're going to set that to say new todo. Is that what it says? Yep, new todo.
[01:54] I went ahead and set the width on the addTodo form to be 100 percent. It's relative so that we can absolute-position things inside of it relative to it as the parent. Then we set the height to 80, which is the same size as the todo items themselves, and we've got a margin of two pixels, zero, and one. That's just to readjust some things a little bit within there.
[02:19] Now we need to go ahead and add some styling for our buttons. Our addTodo button, we're going to absolutely position this and we're going to set it to inline block. We actually could set it to block as well. Both of them would work when it's an absolute position.
[02:39] Then we've got a width of 60 percent, height of 100 percent. Then we've got the background set to transparent, with zero transparency or zero alpha on the color. The reason we're doing that is because that takes the word away. The addTodo on the button, we don't need that, because we're just going to make it that picture of the plus sign.
[03:00] Then we got rid of the border. We absolute-positioned it to the left and the top, and we add that cursor back so everyone knows that it is interactive. Then the background is where we're actually putting in that plus symbol. I should already have it uploaded. There's our plus symbol. Then we've got it positioned correctly in the right place. There's our button done correctly.
[03:26] Notice we kind of switched places on it. We also need to get rid of that focus. Right now when you click on it it gets this big blue outline. We don't need that. I'm going to go ahead and get rid of the focus on there, which it's not getting rid of the focus, it's just getting rid of the outline on focus.
[03:43] Then we need to style our input. Now, the input takes up the whole area. I set the font size to one. Input sometimes is actually a little bit different, and then I set the background color to transparent. I've got a border box for the box sizing so that I can add the padding and the height on it.
[04:07] Then I've got setting the color. The text transform is uppercase as well with that two-pixel letter spacing and that font weight at 600. Again, the input likes todo something different there.
[04:21] We also want to be able to have it look a little bit different when it's got focus. We're going to change the outline to be none, just like the button. Then we're going to add just a slight overlay of a slightly darker color, so when you're in there that you can still see the cursor, you can still type. It's obvious that it's somehow different or distinct.
[04:52] Then finally we need to style our placeholder text. This is the selector that we use for styling placeholder text of an input. I recommend using Autoprefixer to be able to make sure that this works with all the vendor-specific prefixes that you might need to work in the different browsers.
[05:13] I'm just setting the color and again, we want the upper-case two-pixel letter-spacing, the opacity set to one. That's just for different browsers need different things.
[05:23] Now, it's a little bit awkward when you're typing in a new todo item to have to move your mouse over to the button to add it. It's not even incredibly obvious that that's a button. I wanted to make sure that we also had the ability to just hit the enter key. I added the onkeyup event listener to the input. When the key code is 13, then it dispatches the addTodo and it clears out that todo value.
[05:53] Now, I should be able to hit enter and get a new list item.
when I jump around between code / discuss / transcript, and land on code again, it tells me it's only for pro account, yet I'm watching the video with the pro account, sounds strange?!
Instead of having two separate functions to handle the input's onKeyUp and the button's onClick, it might have been simpler to wrap these elements in a form and using the onSubmit handler. What do you think? Is there a reason this wouldn't work?
CSS demo code out of sync with this specific completed lesson. No button, input, focus, etc. for new todo.