Join Ray Villalobos for an in-depth discussion in this video Designing labels, part of CSS: Styling Forms.
Styling labels is a lot like styling other elements. Remember that you can use gradients, shadows, and even images on your labels. Let's see how we can do some of that with CSS. So I am going to go open up the exercise files and open out the Starting Points folder, find a folder for this project, and copy it onto our desktop. Then I'm going to drag this on to Espresso, and I am also going to move the codesnippets.txt file in the Workspace. I am going to also double-click on the index.html file and the mystyle.css file to bring them into the Workspace, and finally, I am going to scoot this over and click on the index.html and Option+Click on the Preview icon to bring up the live preview.
Now I am using a few libraries here, like the normalize.css library and the PIE.htc. You can find those at this location for normalize.css and at this URL for css3pie. You also find out more information about how to install and work with these in the video on exercise files. So let me start by going to the codesnippets file and slide over to the section for this movie, and we are going to start off by copying the code to include our normalize.css file and the mystyle.css file.
So we'll copy that, bring into the index file, paste that right there. You can see how it's already affecting some of our elements. And then we are going to go back into codesnippets and we are going to copy some more of this basic resetting code. I'm going to copy that, bring it into the mystyle.css file. And by applying that, you will see that we've cleared the remainder of this style sheet defaults, we moved the form down a little bit by 50 pixels, and we made all the form elements transparent.
We call the PIE.htc behavior, which will try to make some of the new3css rules work in older browser, and we've reset the appearance of the input type text fields right here, clearing out all the borders and everything else. Plus we have a clear fix for clearing items that we are going to be floating, which we will do in this particular form. If you go back into the index file, you can see that we've created a form with the class of group, and each individual item in here has also an additional class of group to make sure that the containers that have the elements understand the height of these elements.
So we will go back into the codesnippets file. Our basic code here sets up a color for the background and then brings in a JPEG file as the background image for the body. And then we are going to center and position the form elements. I am going to copy this and bring it to mystyle.css, paste that in there, and you can see that with this piece of code right here, we'll bring in an image that we've uploaded into this folder. Just in case that it has problems with that image, we have backup background color right there. The form element has been positioned relative to where it normally is, and I've set up a width for the element here, and this particular piece of code here centers the element.
If I take that out, you can see that the element left-aligns. But by doing this, the element will center on the width of the browser. You can't see some of the borders, so you can't see that there is an input field here that makes the item a little bit more centered, plus some other room right there. So we'll go back into codesnippets. And the way that we have coded this particular form is we set up a series of items in our HTML, so we have this item and this item, and these items are containers. Let's take a look what this project is going to look like when we get done.
So this form is going to look like this. You could see the form is centered. We have a background image with a drop shadow, and we have a label, and to the right of the label, we have an input type text field. Because we want to style the input background, we are actually creating an element called the item, and that is what actually has this rounded border with a little bit of transparency on the background, and it contains this input field. So we are not styling the actual input field; we're making the input field be transparent and styling the item containing the input field, and as well as styling the labels with the background image and a drop shadow.
So that's where we are going, and this is how we've set up the HTML. Each one of these items is going to have the background style with the rounded edges, and then the input fields are going to be styled inside that, and the labels are also going to be inside this container, and that's why we have applied the clearing CSS so that the container understands the height of these label and the input element inside it. So let's go back into the codesnippets, and we'll get the CSS for the items. This looks like a lot of CSS, but it's really just a few rules with a bunch of browser prefixes.
So we'll go back into mystyle.css, paste that code, and you can see the background of item has taken over. And what we've done here--let me expand this so you could read all the browser prefixes together-- so we just created a slight border, given it a little bit of a margin so that they have a little room between, so let me take out the borders. So you could see the border right there. If I take out the margin, you could see that there is a little bit less room in between the elements, and we've set up a height for each element; otherwise they look like this. It's not particularly good. They look kind of skinny.
Then we set up a gradient that has a copy of the brown lines. This is actually quite interesting. We have a copy of the same background that's back here and on top of that background, we have created a gradient that goes from pure white to a slight white, at 30%. That's what this means right here. We are using an rgba color in combination with a solid color. So we are using rgba because we want this color to be partially transparent and show some of these brown lines behind the element.
So right now the only one that's affecting this, because this is a WebKit preview, is this one. So if I take this out, you could see that there is no background, and you can see that we've got two layers: one layer with the brown lines and one layer with a gradient. If I don't put in the brown lines, it's actually going to still show part of the ones that are in the background that are little harder in this position. So if I take this gradient out, you can see that I have no white transparent gradient on top of that.
We also set up a border radius, so you could see that it just makes everything nice and rounded. And we've also set up a drop shadow into these elements. Normally, I make the drop shadow black or an rgba color, but I just made it a hexadecimal, that is, one of these green colors, from the background, just to put a very slight drop shadow on that item element. So once we have that, we need to go into our codesnippets and grab the code for the labels. So in here we have added essentially just a label, we've give the label a width, and we floated them to the left.
We've also aligned the labels in the center of the box and just given the boxes a white color, a little bit padding. Otherwise, I need to have this padding that will show to be the height of the other element. We added a leaf background as well as some roundness to the edges. You need to add that to the labels also, because the background is already rounded. And then we added a drop shadow that is inset, so the drop shadow goes inside the element.
We've also added a text shadow, which makes the text a little bit easier to read, because of the pattern in the leaf texture that we grabbed. So that looks pretty good. We need to actually add some additional styles for the input type text, and we'll copy that and paste it, because right now if we look at the input type text field, it's kind of sitting not exactly where it should be sitting. We need to make sure that we format it appropriately, so in the mystyle.css we are going to add a bit of code to make sure that we give it a width, display this block, add some padding to it.
Make sure that we clear the outline out. You could see that it's already taken effect over here. So setting a width, displaying this as block. We are floating this to the left, changing the size of the font, and some other styles there, and making sure that also the outline is transparent. You are not going to able to see what this does here, but if you are previewing this in Safari, Safari by default puts sort of soft-blue outline whenever you focus on an element, which become annoying when you want your elements not to show an outline at all. It kind of breaks the illusion of having this kind of cool transparent field if you see a big outline of a box right behind it.
So this clears that out, this outline style right there, and there we have those labels. Now let's check this out on Adobe BrowserLab, so we can take a look at how different browsers support it, and go into BrowserLab. And I load up a copy of this document that I've already placed on a server. You can see that Internet Explorer 7 doesn't do a perfect job of taking care of some of those elements, but it does pretty well. I mean, I think this is pretty decent for IE7. If you go to IE8, it looks kind of the same.
It doesn't pick up any of the drop shadow elements, definitely not the inset drop shadow that we styled, but Internet Explorer 9 does a much better job. And as we go other browsers, you could see that they do a much better job of understanding the styles. So this looks pretty nice. One way that you can style labels is by adding background images. I think it works really well. And you can use positioning to place them wherever you want. You should be getting the hang of styling individual elements by now. Practicing what you can do with backgrounds on existing elements is a great way to get better acquainted with more advanced CSS features.
- Creating forms with the <form> element
- Adding labels and basic usability features
- Navigating elements between browsers
- Styling the background
- Creating input and button fields
- Working with select fields
- Floating and positioning grouped elements
- Using HTML5 input types
- Resizing elements and adjusting the view for mobile devices
- Adding jQuery navigation
- Designing validation feedback