Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In addition to the pseudo selectors that we have used to style our links, CSS contains other pseudo selectors that allow us to respond to user interaction. One of those, the Focus pseudo selector, can be used with forms to let users know when they have changed focus from one form to another. We will add an additional layer of interactivity to our form by using the Focus pseudo selector on our text fields. Now, I am going to be honest with you guys. You deserve a break after that last exercise. So this one is going to be a snap.
We are only going to do one selector and it's going to have a profound impact on our form. So, I have the join.htm file open and all we need to do is I am going to switch to Split View. Make sure I am focusing on my CSS and again I am going to scroll down to about line 700 or so. There we go! As a matter of fact, line 739, that's where we need to be. I am going to hit Return and go right after that one and I am going to type in #mainContent input. Now remember those are our text fields, .text, and then without another space type in :focus.
Now, you may have remembered styling our links a while back we did a:link, a:hover, a:active, a:visit. Well, it's the same thing. The Focus pseudo selector means when somebody has clicked on this form element or established focus on it. So, by saying input.text:focus we are saying when somebody has selected any of the input field with the class of text. Very nice, right? Well, we also want to do the same thing to our textarea. So, I am going to do a ,#mainContent textarea:focus.
So, those are both going to do the same thing for us and that comma right there between them is going to group them together. Open a curly brace and all we're going to do here is change the background color. So type in background #ffc, whic is sort of a cream color. Close that. Do a Save All, and guess what? You're done! Let's go ahead and preview that in our browser and let's check out what that does for us. By establishing a background color, when somebody has focus in a text field, when you click inside the text field notice that the background color changes and you are essentially giving your user that input that they are typing into that specific area.
Now it's important to note that not every browser supports the Focus pseudo selector on form elements. Most noticeably some of the older versions of Internet Explorer. However, the additional usability that this brings to your forms in standards compliant browsers is well worth the extra line or two of code within your CSS. Besides non standards compliant browsers will still display your form just fine. Its users just won't have this really cool increased interactivity that we're seeing here.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.