Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Subs House Ad
Apr
30

Make your forms beautiful with CSS

by Dave Harfield

06 Add some style

p64step06

Take the time now to review the page. The form already looks much better. Don’t be tempted to stop at this point, though. We’re going to make this form feel like it belongs on the page. Start off by increasing the font size of the form fields to be more user-friendly and appropriate to the page design. Add the code below beneath all the existing rules in the style sheet.
input {
padding: 5px;
font-size: 1.4em;
border: 1px solid #493F0B;
color: #1E1903;
background: #F5F6D4;}

07 Fix the label

The label text is now misaligned, so we need to add an additional rule to the label selector to make the label text align vertically with the form fields. We’re going to take advantage of the line-height attribute to force the label text to take up more vertical space. The precise figure that will work requires a bit of experimentation; we found a value of 3.4em to work well. Add the rule below into your existing label section.
 line-height: 3.4em;
}

08 Required fields

p64step08

We’ve got a ‘*’ marking our required fields currently, which is very important in terms of usability, but can be made far more obvious and aesthetically appealing by using a graphic instead. If you examine the HTML, you’ll see we’ve wrapped the ‘*’ in a span in each case. We’ve also set each label for a required field to have a class of ‘required’. These two hooks allow us to attach our rules conditionally so that the graphic only shows up where the field is required. We’ll start off by hiding the span by setting it to be absolutely positioned, and pushing it off the left of the screen. Here, add the code below after your existing rules.

label span {
position: absolute;
left: -10000px;
top: 0px;
}

09 Add the graphic
The asterixes are now hidden, but we need to bring in the graphic for each required field. This is very easy to do, as we simply add the background and set it to be positioned to the right of the label. We only want this background to be applied to labels with the required class. Once more, add the rules below to the style sheet:

/*label.required {
background:transparent url(required.gif) no-repeat center right;
}

10 Add padding
The graphic looks great in place, but it’s overlapping the label text. This is easy to fix, thankfully. Simply add some padding to the right-hand side of the label to compensate for the width of the background graphic. Locate your label section in the style sheet and include the rule below to add this padding. Note that we don’t add this rule only to the label.required selector because if we did this, the nonrequired labels would align differently to those that are required.
padding-right: 30px;

Pages: 1 2 3 4

Bookmark and Share

39 Comments »

What's your opinion?

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.