By: Rachel Andrew

July 14th, 2003

Reader Rating: 8.5

Whether your main business is Web design or backend development, chances are you spend a fair amount of time creating forms for user input. So you already know that the default appearance of forms isn't always appropriate for the look and feel of your site.

In this article we'll look at how you can use CSS to create attractive and usable forms.

Styling Form Elements

It's possible to change the default look of form elements by styling their html tags: input, select and textarea.

The input Tag

Defining rules for the input tag will change any instance of that tag in your document. For example, if I wish all elements to have a purple background, I could define the following in my style sheet.

input {
 background-color: #666699;
}

This will add a purple background color to those elements that are marked up using the input tag.

The select Tag

The <select> tag creates a list menu. You can create rules for select which will affect any list menus in your document.

select {
 background-color: #666699;
 color: #ffffff;
}

The textarea Tag

The <textarea> tag marks up multiple line text input fields. Once again, setting rules for textarea will change the look of all of these elements in your document.

textarea {
 background-color: #666699;
 color: #ffffff;
}

The form Tag

You can also style the form tag itself, adding borders, background colors and adjusting the margins and padding. Form is a block level element, so you can change the way it displays in much the same way that you would style a paragraph.

form {
 border: 1px solid #666699;
 padding: 5px;
}

Creating Classes for Form Elements

Simply defining rules for your elements has some obvious problems. You probably don't want those funny boxes around your checkboxes and radiobuttons; you may also want to create a different appearance for text input boxes and buttons. Perhaps you'd like to have several different form styles available in your style sheet, each serving a different purpose.

To do this, you can create classes and apply them to individual form elements. For example, this class in the style sheet:

.texta {
 font-size: 10px;
 background-color: #CCCCCC;
 border: 1px solid #666666;
}

can be applied to a form element like so:

<input name="textfield" type="text" class="texta" />

Any other form elements or input tags in the document will remain unstyled, as this class is not applied to them.

When I begin work on a site that's going to involve a lot of forms, one of the first things I do is create classes for my standard forms in the style sheet. It doesn't matter if the style needs to change at a later date -- that simply involves tweaking the values in the style sheet. The important thing is that classes are applied from the outset, so that any changes affect all forms on the site.

Putting It Together

To conclude this article here are a couple of typical forms -- for login and user registration -- that show how we can use CSS to turn forms into an attractive interface feature.

Styling a Login Form

The first form we'll look at is a login form. You might find a form like this on a site that requires the user to sign in, in order to access more features (e.g. an online bulletin board).

The HTML looks like this:

<form name="login" id="login" method="post" action="#">  
 <label>Username:  
 <input type="text" name="user" tabindex="1" />  
 </label>  
 <label>Password:  
 <input type="password" name="password" tabindex="2" />  
 <input type="submit" name="Submit" value="Submit" tabindex="3" />  
 </label>  
</form>

Without any styling, the form looks like this:

First, we'll style the form tag itself. In an attached style sheet add the following CSS:

form#login {  
 background-color: #CCCCCC;  
 color: #000000;  
 border: 1px solid #999999;  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 font-size: 10px;  
 text-align: right;  
}

We only want the form with the id of #login to be styled, and the rules we've defined give this kind of form a background color, a default text color, and a border. We've set the font family and size of the text within the form, and right-aligned the form's contents.

The input fields for a login form often need only be small, as the input is simply a short username and password. We can set the width of the text input boxes using CSS. To do this, I've created a class called ‘#login .text'.

#login .text {  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 font-size: 11px;  
 width: 100px;  
 margin-right: 6px;  
 
}

I've also added a margin-right setting, to insert a little space between the end of the input box and the start of the next label.

To make these changes affect the form, we need to add the class name to our username and password fields.

<input name="user" type="text" id="user" tabindex="1" class="text"  />  
<input name="password" type="password" id="password" tabindex="2" class="text" />

The final step with this form is to style the submit button, which is looking a bit large and clunky at the end of the form right now. So we'll create another class, this time for a button within the #login form.

#login .buttons {  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 font-size: 10px;  
 background-color: #333333;  
 color: #FFFFFF;  
 margin-right: 6px;  
}

Apply this class to your submit button to see the completed login form.

<input name="Submit" type="submit" tabindex="3" value="Submit" class="buttons" />

I have created this form without using tables for the layout, however, all the techniques we've discussed could be applied to a form that's within a table. The next example will look at styling within tables.

A Registration Form

On a site that requires users to login, you'll probably also offer a signup facility. CSS can help you make longer forms, such as registration pages, look attractive, too.

The mark-up for the form we'll work with follows (note that I've removed most of the states in the option list for brevity):

<form name="signup" id="signup" method="post" action="#">  
 <table>  
   <tr>    
     <td colspan="2"><label for="name">Name</label></td>  
     <td colspan="2"> <input type="text" name="name" id="name" tabindex="1" /></td>  
   </tr>  
   <tr>    
     <td colspan="2"><label for="address1">Address Line 1</label></td>  
     <td colspan="2"> <input type="text" name="address1" id="address2" tabindex="2" /></td>  
   </tr>  
   <tr>    
     <td colspan="2"><label for="address2">Address Line 2</label></td>  
     <td colspan="2"> <input type="text" name="address2" id="address2" tabindex="3" /></td>  
   </tr>  
   <tr>    
     <td colspan="2"><label for="city">City</label></td>  
     <td colspan="2"> <input type="text" name="city" id="city" tabindex="4" /></td>  
   </tr>  
   <tr>    
     <td><label for="state">State</label></td>  
     <td><select name="state" id="state" tabindex="5">  
         <option value="">-- Select ---</option>  
         <option value="AL" >Alabama</option>  
         <option value="AK" >Alaska</option>  
       </select></td>  
     <td><label for="zip">Zip</label></td>  
     <td> <input type="text" name="zip" id="zip" tabindex="6" /></td>  
   </tr>  
   <tr>    
     <td colspan="2"><label for="email">Email Address</label></td>  
     <td colspan="2"><input type="text" name="email" id="email" tabindex="7" /></td>  
   </tr>  
   <tr>    
     <td colspan="4"><input type="submit" name="Submit" value="Submit" tabindex="8" /></td>  
   </tr>  
 </table>  
</form>

Here it is in the browser.

This form is laid out using a table. To keep the table mark-up down to a minimum, we can use CSS to style both the table and the form. First, to style the table, add the following to your style sheet:

#signup table {  
 background-color: #F9FBFD;  
 color: #000000;  
 width: 440px;  
 border: 1px solid #D7E5F2;  
 border-collapse: collapse;  
}  
 
#signup td {  
 border: 1px solid #D7E5F2;  
 padding-left: 4px;  
}

The code dictates that these rules apply to any table and td that appears within an area with an id of ‘signup'. As such, these rules won't affect the look of any other tables on your site.

Most of this should look fairly familiar by now, however, note the line:

border-collapse: collapse;

This collapses the borders, so that space doesn't appear between each cell in the table. To demonstrate the effect of this code, here's how the form appears when the border-collapse line is removed from the CSS.

Here's the form again, this time with the border-collapse line included in the CSS file:

There are two types of cells in the form: those that contain labels, and those that contain form fields. Differentiating between these cell types can make the form less cluttered and easier to scan -- particularly if it's lengthy.

Create two classes in your style sheet – ‘.labelcell' and ‘.fieldcell'.

Add the class ‘labelcell' to every td that contains a label, and ‘fieldcell' to every cell that contains a form field.

<tr>    
   <td colspan="2" class="labelcell"><label for="name">Name</label></td>  
   <td colspan="2" class="fieldcell">    
       <input type="text" name="name" id="name" tabindex="1" />  
   </td>  
</tr>

I've also created special classes for the smaller cells (in my form, these contain the select menu for state, and the zip code field). I've named these ‘.smalllabelcell' and ‘.smallfieldcell', which allows us to treat these cells separately.

In your style sheet, add the following:

.labelcell {    
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;    
 color: #3670A7;    
 background-color: transparent;    
 width: 220px;    
}    
   
.fieldcell {    
 background-color: #F2F7FB;    
 color: #000000;    
 text-align: right;    
 margin-right: 0px;    
 padding-right: 0px;    
}    
   
.smalllabelcell {    
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;    
 background-color: transparent;    
 color: #3670A7;    
 width: 100px;    
}    
   
.smallfieldcell {    
 background-color: #F2F7FB;    
 color: #000000;    
 text-align: right;    
     
}

You should end up with something that looks like this.

You can now style the form fields within these cells. As we've already applied a class to the td, we can simply choose to style all input tags within the td to which that class is applied. Add the following to the style sheet:

.fieldcell input {    
 width: 200px;    
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;    
 background-color: #D7E5F2;    
 color: #102132;    
 border: 1px solid #284279;    
 margin-right: 0px;    
}    
   
.smallfieldcell input {    
 width: 100px;    
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;    
 background-color: #D7E5F2;    
 color: #102132;    
 border: 1px solid #284279;    
}    
   
.smallfieldcell select {    
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;    
 background-color: #D7E5F2;    
 color: #102132;    
 border: 1px solid #284279;    
}

Adding a special class for our submit button finishes the job.

.button {    
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;    
 background-color: #D7E5F2;    
 color: #102132;    
 margin-left: 12px;    
 margin-top: 3px;    
 margin-bottom: 2px;    
}

In this article, we've explored some of the ways in which you can use CSS to change the look and feel of html forms. We now know how to:

• Style the html elements, including form, input, select and textarea
• Create classes for form elements
• Use a combination of the above to create two very different forms

These techniques should work well in modern, relatively standards-compliant browsers. However, note that the rendering of form fields styled with CSS is one of the places where Netscape 4.* can behave strangely.

If you make extensive use of CSS in your forms, you may wish to attach a separate ‘form styles' style sheet using the @import method. This will enable you to hide from Netscape 4 styles that will cause it problems. To read more about the @import method, see http://www.mako4css.com/csstwo.htm [1].

[1] http://www.mako4css.com/csstwo.htm