- Overview
- Transcript
3.2 Create Awesome States on Form Elements
Forms are a big part of any user interface. The default styling — 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 text area.
1.Introduction1 lesson, 00:41
1.1Welcome00:41
2.Typography6 lessons, 17:23
2.1Use CSS Shorthand04:05
2.2Change Text Selection Color01:50
2.3Awesome Font Stacks04:10
2.4Drop Caps03:00
2.5Style Placeholder Text02:15
2.6Remove Dotted Outline on Links02:03
3.Forms2 lessons, 10:52
3.1Create Custom Radio Buttons and Checkboxes06:38
3.2Create Awesome States on Form Elements04:14
4.Positioning3 lessons, 12:29
4.1Horizontal and Vertical Centering03:48
4.2Absolutely Center an Image03:41
4.3Properly Clear and Contain Floats05:00
5.CSS Generated Elements4 lessons, 17:44
5.1CSS Triangles05:14
5.2CSS Circles01:36
5.3Create a Layered Paper Effect05:30
5.4Get Creative With the List Bullets05:24
6.Useful Techniques3 lessons, 08:52
6.1Create a Fixed Back to Top Button03:35
6.2Even and Odd Rows03:36
6.3Create Fluid Images01:41
7.Conclusion1 lesson, 01:47
7.1Recap01:47
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.