Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Define Form Element States with CSS Form Pseudo Classes

    Garth BraithwaiteGarth Braithwaite

    Using just semantic CSS Pseudo-Classes you can help define important states for form elements that ensure the user provides the correct data without frustration.

    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss