Name: Define Form Element States with CSS Form Pseudo Classes
Uploaded: 2018-08-17T16:39:13-05:00
Description: 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.

Understand Basic CSS Selectors

Identify Interactive HTML Elements with CSS Link Pseudo Classes

Define Form Element States with CSS Form Pseudo Classes

Target Custom HTML Element Patterns with DOM Hierarchy Pseudo Classes in CSS

Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements

Chain Simple CSS Selectors for Fine-grain DOM Element Targeting

Advanced CSS Selector Chaining for Improved Interaction without Javascript

Understand CSS Selector Specificity

CSS Selectors in Depth

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.

https://app.egghead.io/api/v1/lessons/css-define-form-element-states-with-css-form-pseudo-classes/subtitles

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.

Define Form Element States with CSS Form Pseudo Classes

Share this video with your friends

Course

CSS Selectors in Depth