Style Web Forms Using CSS

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.