Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating custom input and buttons fields with CSS3 PIE

From: CSS: Styling Forms

Video: Creating custom input and buttons fields with CSS3 PIE

Making your forms look great means understanding how to work with a variety of CSS3 rules like gradients, drop shadows, and border radius. Unfortunately, making several of these elements compatible with older browsers is a real challenge. We are going to take a look at a library called CSS3 PIE that you can use to make older browsers try to understand and display some of these elements. We will also take a look at how to target different browsers, specifically different versions of Internet Explorer, so we can fix problems with those browsers when we encounter them.

Creating custom input and buttons fields with CSS3 PIE

Making your forms look great means understanding how to work with a variety of CSS3 rules like gradients, drop shadows, and border radius. Unfortunately, making several of these elements compatible with older browsers is a real challenge. We are going to take a look at a library called CSS3 PIE that you can use to make older browsers try to understand and display some of these elements. We will also take a look at how to target different browsers, specifically different versions of Internet Explorer, so we can fix problems with those browsers when we encounter them.

So we are going to open up the exercise files, and we are going to open up the Starting Points folder and find the folder for this chapter. Open up the folder and copy the Working Folder onto the desktop, and I'm going to drag that on to Espresso. And I'm going to find the codesnippets file, drag it into the Workspace, double-click on the index for this project to also open it up in the Workspace, and then I'm going to Option+Click on this Preview icon to bring up a live preview. So you could see this form is a pretty simple form. It's just an input element where you can type something in and a button right next to that.

So let's take a look at how we are going to be styling that with CSS. I already uploaded this project onto a web server, and you could see that we've got a nice background with the same input and submit button, but we have added CSS3 gradients. There is an inside drop shadow inside the form element, also a background that shows an image, and an input field where you can type in some text to do our search. So we are go into out codesnippets files and find the code where we link to a couple of CSS files that I'm going to be using for this project. I want to copy that and go back in here and in this head section just paste those two files.

The first one is our normalize.css file that we have downloaded from a web site, and the purpose of this file is to help us standardize, or try to make browsers as compatible as possible. So go in here. So I've already downloaded this file, and I'm linking to it in our HTML project. So here is the call to the normalize file. It is right here. We are also calling another style sheet called mystyle.css, which is right now empty. You can already see that when we add the normalize.css file, it actually changes the margins and the way that the buttons looks.

So it's already doing some work right there and standardizing the way that the forms are going to look. Now we are also going to add another library called CSS3 PIE, which you can find at CSS3PIE.com, and the purpose of this library is to try to make older browsers, mainly Internet Explorer versions 6 through 9, capable of rendering some of the newer elements in CSS3. So you could see that it has some support for drop shadows, box shadows, and other elements. Unfortunately, it doesn't show up things like inset drop shadows and multiple backgrounds, but it tries to do as good job as possible, and it's continuously under development, so hopefully we will be able to see some of those things come in at a later point in the project.

So you can click right here to download a copy of this, and then I'm going to open up the copy that it downloaded. You could see there are different versions of this file. You are going to need the one called PIE.htc. There are different versions of them that do slightly different things in different environments. So what we are going to do is we need to copy it into our current working folder, which you can do by simply dragging this either into this Project Files area right here in Espresso or by dragging it onto our Working Folder, which we will do. Copy that right there. It will appear right here in the Project Files in Espresso.

So this particular library is not going to work if you preview it on your browser. At any rate, most developers don't have really old versions of Internet Explorer installed. It's something that you are going to have to see on a web server, so you are going to need to copy these files onto your server. And there's one more issue that you might have with this particular file that needs to be addressed: you will need to create a file that will make sure that your server understands how to read this file properly. This actually happens quite a bit with different types of HTML5 elements. A lot of times they are in a format that the server will not understand.

In this particular case, we've got a file that's called PIE.htc. If your server doesn't understand how to deal with that HTC file, they will be served with the wrong type of information and your server will interpret them as text files. So in order to fix that, we are going to need to create what's called an htaccess file. So I'm going to show you how to do that on a server. You would go into an FTP program and connect to a server. So I already have a server that I've created to upload these files to, and I'm just going double-click on this shortcut right here.

And on the server that you want to place this PIE.htc file, you want to create a file and call this file .htaccess. You can't really create this file on your local machine and upload it, because by default, an htaccess file--or any file that begins with a period at the beginning--will be an invisible file in some platforms like Mac OS. So if you try to create this file on your desktop, the file would either immediately disappear or it won't let you create it at all on the machine that you are working on.

So you're going to have to do this in the server and hit Create new file here which you could do by right-clicking and selecting New File from Cyberduck-- just about any FTP program will let you create a new file though--and type in the name .htaccess and hit Create. Once the file is created then you can edit that file. And in this case my default editor for Cyberduck happens to be Espresso, so I can just click on this file to edit it. And I'm going to need to copy something from the codesnippets, which is this command right here. So all that this is doing is letting the server know that from now on when it encounters files with the extension .htc, that it should interpret it as a type of text/x-component, as opposed to a simple text file.

So I'm going to come over here, paste this, save this file, it'll upload it to my server, and I'm going to close it. I'm going to refresh Cyberduck, just to make sure that it did upload. Notice that now instead of having a 0 byte size, it now has 29 bytes, which means that it does have some information in it. You don't really need to do this all time. As a matter of fact, if you put this on this folder, any folders that you create in this same directory will also automatically pick up that command from this htaccess file. Htaccess files are quite handy for handling a lot of issues, so that's the way that you have to create them.

It's a little bit weird, but it'll prevent you from having a headache and noticing that this PIE file is not working. So once you've done that then everything should be fine with your document. Just remember, before you upload the rest of your files you want to make sure that you have an htaccess file so that it knows how to handle right file type. So I'm going to close out of here and go back into our form and continue to work on this. So now I'm going to copy some additional code that will set up the basics of our HTML page, and it's going to reset the input type text fields a little bit more. So I'm going to copy this from our codesnippets.txt, and I'm going to go into mystyle.css file.

I'll double-click on it so that it comes in to the Workspace, and I'm going to paste this bit of code right here. You can see that I already brought in a lot of different things. I brought in the background, and I am displacing the position of the form a little bit, by 50 pixels, and I am also calling the PIE.htc file in here. Now if you only want certain elements in your document to be backwards compatible with older browsers, you can just place this call in any element that you want to attach that to. If you want to make it available to all of your form elements, you could use the asterisk universal selector--and I'm using that here with the form selector to make sure that all my form elements are calling the PIE.htc file.

So once I've done that then I reset some of the appearance in browsers for different elements, mainly the text fields right here, and I'm going to set the borders of things and the radius and all that other stuff to zero, clearing everything out. And here on the body section is where I add a basic background color as well as the background that has the little line pattern that I want. So let me go back into codesnippets, and we'll grab the next piece of code. And what we're going to do is, instead of trying to style the actual input field to have rounded edges, we're actually going to style the form element to look like an input field and make our input field to be placed inside that form element.

So I'm going to copy this piece of code right here. And this is a really large piece of code, but it's really just a bunch of browser prefixes. So I'll copy that and go back into my style sheet and paste that right here, and you can see that it already started to add quite a bit of information into our style. So what we're doing now is setting the position of this element to relative and the width and the height to a certain width and height, and this particular piece of code right here, setting the element to have a margin of 0 and auto is going to center the element. Let me take these out so you can see them at work.

So if I take that out, you can see that the element's still on the left. Right now, if I add that in, adding the margin zero auto is actually what's going to be centering that element in the middle of the page, no matter how wide I make the page. And I'm giving it a simple one-pixel white border. It's just like a slight border around the whole thing. And then I go through and I set different background elements. So this is adding a magnifying glass picture, or a magnifying glass image, which is right here, as well as a basic background color for older browsers, and I'm also adding this version of the PIE background command.

So normally when you do background elements with gradients or background images, you will be adding a bunch of different rules for different browsers, including WebKit, Mozilla. So when you're adding gradients or background elements, you add a gradient for each type of the different browsers that you're using. When you are using PIE, you're going to need to add a background rule for PIE itself. There are other things like border radiuses and shadows that it will try to pick up automatically, but for backgrounds and gradients you're going to have to use this special call.

So you should definitely take a note of that. The next thing we're doing is adding a little bit of border radius to our form element. So you could see that if don't add them, the borders are rectangular; if add them, the borders have that nice round edge. Then I'm also adding a drop shadow. So you could see that there's an inside drop shadow that gets added with this command right here. Let's go back into our codesnippets and keep on plugging along with the code. Now we'll style the input type submit. It's also another very big piece of code, but it's a bunch of different rules with a bunch of browser prefixes.

So we'll go back here and we'll paste that. You could see that now our button looks really nice. I'm actually positioning this button to the right of the form element. But since the position of the container, the form element, is set to relative, if I position this as an absolutely positioned element, it's going to align it to the previous form element and align it to the right of that form element and give it about the same width and height and no border, so it doesn't have that default border that buttons have a lot of times. Then I set up a bunch of gradients again.

They're really not that complicated, except that we have to add the different prefixes. Then I set some border radiuses for the button itself again, and some shadows as well. Plus I'm adding a border to the left so that I get an extra little border to the left of the image, so it has a more of an embossed look. Then I set the color of the text inside that input field from the default black to white. Finally, I also need to create a hover state, so when somebody rolls over this button, I want it to have a little bit. So I'm going to copy this and I go into my style sheet.

I'll paste it right here, and now when I hover over the button, it shows me that slightly different gradient, but this is really just another gradient. Same sort of rules as this, just a different color. Go back to my codesnippets and do the same thing with the text field that's going to go inside. Right now the text field is a little bit further out. Because remember, it looks like right now the text field is this form element, but in reality the form element is what allows us to place this icon back there. We need to change this input field so that it moved a little bit over to the right and aligned a little bit better.

So that's the next piece of code that we're going to add, back into my style sheet, and now our text, looks a little bit better, and it's positioned better. And these are just some plain simple rules: positioning this, floating it, and aligning it so that it shows up in the browser properly. Now we're also changing the outline property because some browsers will automatically place an outline on focused elements. That's another thing that you might need to take out in some of your projects. One last thing that you are going to have to worry about is that even with CSS PIE, some browsers are not going to be able to recognize all the rules.

Thankfully there's a really easy way to serve different code to different versions of Internet Explorer. To do that, we can use a conditional piece of HTML that will display a slightly different style sheet to browsers that are older than certain versions. So I know that this particular code is going to look really well on all browsers, including IE9, but versions before IE9 won't display some of the elements. Specifically the submit button won't be displayed properly. So I'm going to copy this piece of code, and this is actually going to be added into our index.html file.

It's not going to make an impact right here because this browser supports all the features, but by adding this piece of code, we're telling the browser to make sure that if the browser version is earlier than Internet Explorer 9, then it's going to modify the input submit button to not have a border and to not have the little extra left border right here, plus the shadow that we used in the element. So I'm going to save that. I'm going to show you how that works. I'm going to switch to Adobe BrowserLab, and I'm going to pull a version of this form that's finished and show you that using that code allows this form to display properly on Internet Explorer 7.

It looks a lot better in Internet Explorer 9. It did pick up some of this gradient in Internet Explorer 9, and it looks wonderful in other browsers that can pick everything that we've styled on this form. And I'm going to take off my conditional code in the version that are uploaded to the server, and I'm going to tell Adobe BrowserLab to refresh and show that without the conditional code, Internet Explorer 7 does pick up the gradient and it picks up the border radius for the input submit button, but not the border radius for the form field.

Even though CSS PIE tries to do its best to make things compatible in older browsers, it isn't always perfect, and you always have to watch out for this kind of thing. So I'd highly recommend using something like BrowserLab to always check your work across different browsers. I'm going to go ahead and also just take the call to our PIE file so that you can see-- so I'm going to save this and I'm going to reload it-- so you can see, without CSS3 PIE, the gradient doesn't get picked up properly. So CSS3 PIE does a decent job of trying to make things that are older as compatible as possible, but like anything else, it's not perfect.

I think it's best to try to determine which browsers you are going to be supporting and making sure that you have something like BrowserLab that can check the version of your code in different browsers.

Show transcript

This video is part of

Image for CSS: Styling Forms
CSS: Styling Forms

31 video lessons · 12956 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Styling Forms.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.