3.2 Create Awesome States on Form Elements

Forms are a big part of any user interface. The default styling, however, the one generated by the browser, doesn't look so good. That's why developers almost always style them somehow. However, one thing they tend to forget is to style the hover and focus states of the text inputs. Doing this properly will create a good-looking form and also improve the user experience. So let me show you how you can do that by experimenting on some text inputs and a textarea. This is what we're working with, three text inputs and a textarea. So in our text editor we have the simple HTML, and our CSS. So let's begin by creating kind of a reset for our text input and textarea. So I'm going to say input type text. And textarea. Let's begin by setting a border, 1px solid, kind of a light gray. Then we're gonna set a border-radius of 3px. Let's set the outline to none just to get rid of that blue halo that appears in Chrome. Maybe add a bit of padding, say .5em, and that's about it. Let's check out the result. This is it. Let's also position the labels above the form controls. So we're gonna say label display block. And now let's focus on the hover state. So we're going to say input, type text, and textarea. Both of these with the hover state. Let's begin by setting a box shadow, we're gonna say zero for x, zero for y, three pixels for blur, and let's give it a color, gonna put a blue color, something like this, 116, 185, 239, and opacity 100%. Okay, let's check it out. Okay, that's not too bad. But, remember, since we also need a focus state, let's lower the opacity to about 0.5 and also add a transition. So, we're gonna say transition. We're gonna transition the box-shadow. Let's say .2 seconds ease-in-out. Okay. Let's also add this transition to the main state, the initial state of the elements here so that when you move your mouse away, it also fades. It also eases the same transition. All right, so now for the focus state, I'm just gonna copy these real quick. Okay, on focus, we're gonna do the same box-shadow. In fact, let's copy this real quick, box-shadow. Same properties but opacity will be 1, which is 100%, and also let's add a border color of 74B9EF. Let's check it out. So that is the hover and focus. And there you go, that's a very simple way of styling these form elements. Now of course, you can do much more, like adding background colors and even more effects, but keep in mind that most of the time you just have to keep it simple.