Define Form Element States with CSS Form Pseudo Classes

Instructor: [00:00] There are a set of state pseudo-classes that are designed to work with form elements and interactions. Similar to link pseudo-classes, these add some interaction without adding any JavaScript that are not explicitly declared in the DOM.

[00:12] Let's take a look at the mark up. I have a form with some field sets to group things together. I've got some labels. This is an input of type email. This one is of type text. It has a pattern on it to actually validate the value as the user types it in. This has required attribute.

[00:32] This field set for city is disabled, so I can't actually put my cursor in there. I can't give it focus. This field set is just a radio group. Now, let's add some styles. I'm going to start with the field set, because it is ugly. I'm going to start by removing the border and the margin.

[00:52] I'm going to add some padding just to make it easier to read. Now, all of the text inputs have different types, so I added a text class to all of them, and we'll use that to change the border color a little bit.

[01:12] When these inputs have focus, you get a blue outline. To change that, I'm going to use the focus pseudo-class on all the inputs. Then, I can remove that outline and I'll replace it with a box-shadow. That gives it a little depth. I'm going to go ahead and change the border as well.

[01:37] As I clicked through these, you can see that shadow on email and zip. City is still disabled, so I cannot give it focus. To make that more obvious, I can use the disabled pseudo-class on the field set and change the opacity, so that it looks great out when it's disabled.

[01:56] There is also an enable pseudo-class if I wanted to directly target all of the enabled items. Let's add some styling to these radio buttons. I'm going to use the check pseudo-class to target the checked item, and use the sibling selector for label which will enable me to style the label of the select item.

[02:16] I'm going to go ahead and change the font style to italic. When I go through and click these, you can see that label changes on each one to be italic. I can also use the invalid pseudo-class to make it more obvious to the user that what they are typing in the text input is invalid.

[02:34] I can set the border color to red, which you can see here will actually make this zip turn red, because it's invalid to leave it blank, because it is required. I can also use the input valid opposite pseudo-class to change the border color to be green, which will change the email field, since it doesn't have that required attribute, so it's OK to be a blank.

[02:58] If I want to go ahead and differentiate those required fields, I could use the required pseudo-class. Here, I can actually use border width and make it just a little bit thicker. I should say that there is also an optional pseudo-class, if you needed to target all the optional items.

[03:17] We've looked at how we can use some state pseudo-classes to target specific interactions from the user. Hopefully, we can use those to make it a little bit more obvious to the user what they need to change or what they need to do as going through filling up the form, before they submit it.