Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
CSS3 provides us with three pseudo-class user interface selectors that will come in very handy when styling interactive forms and applications. The enabled, disabled, and checked pseudo-class selectors allow us to style elements based on their current state within a form or an application. As the name suggests, user interface selectors are designed to control the styling of user interfaces. Let's take a closer look at these selectors before we actually use them. The enabled and disabled pseudo-class selectors allow you to define styling for any form elements that are either in the enabled or disabled state.
It gets a gray border around it and obviously I can click inside of it but I would really like maybe some more visual styling here to let users know that hey this is currently disabled and then really tell the difference between this state and that state, which again in current browser styling isn't quite as apparent. So again in your code editor you want to open up contact.htm and the main.css that accompanies that and here you can see just a brief little script that's going to toggle the enabling and disabling of this form element and then I want to scroll down and find the form element itself so you guys can see what's going on with this.
So again we are using that pseudo-class UI selector. Now inside that really all I am going to do here is just put a background color into the input field and I'm just going to give it a gray background, so maybe #e3e3e3 will give it a little bit of warm gray there. What that's going to do for us is this particular text input field is going to have a gray background to it, which is going to be very different from the other text input fields and it's only going to be that way while it's disabled. It's a really big visual clue to say hey I am not currently enabled.
Now of course, the label that's in front of this is also still going to have that just sort of normal label styling and it would be really cool if I could somehow target that label as well. Well, you know, the structural selectors that we've been learning if we couple those with this pseudo- class selector we can do that. Let me show you what I mean. If I go down to the next line I can type in input:disabled + label. So I am essentially now saying hey anytime label comes directly after an input that's disabled, style it this way.
Now I had to do a little fudging on this. You may have notice that the label tag for this particular text field comes after it, which is a little bit different behavior and not as accessible I will grant you, but it is going to allow me to do the styling I want, which in this case is really what I'm after. So here I am going to type in a color. I am just going to change the color of it and we are just going to do another gray, so #aaa. So I am going to go ahead and save this, preview this in my browser, and again I am just going to do this one in Firefox, just to switch it up a little bit.
And if I scroll down to that form, now I can see that just below Please send me monthly discounts, so below the text input field is grayed out, it has a gray background to it and the label itself was grayed out as well. As soon as I click it, they're both enabled. Now I have a really rich visual cue between those two states to help inform the user as to what's going on with the interface. That's pretty cool. And of course, there are a lot of things that we could've done with this, like showing and hiding the email input for example, putting a border around the checkbox when it's checked, all sorts of things.
And as we saw with our last selector we can combine these user interface pseudo-class selectors with other selectors to create a really powerful combination. Now you, unfortunately you have to keep in mind Internet Explorer's current lack of support. For the time being, it will probably limit you to just enhancing the existing styling rather than controlling all aspects of it, but as you can see it's a fun way to increase the usability of your forms and applications.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.