CSS Zibaldone

• Home
  • CSS Articles
    • Styling form elements

Styling form elements

In this article I'll explain how to format form elements by using CSS. Finally, I'll provide a series of screenshots taken from the various browsers.

Table of contents

• The markup
• General styles
• Adding some padding to the form
• Fieldset and legend
• Creating centered rows
• Input and label
• Select
• Textarea and submit button
• Final screenshots
• Download examples

The markup

We start with the following markup:

Listing 1. Markup for a form

1. <form action="#" method="post">
2. <fieldset>
3. <legend>Personal information</legend>
4. <div class="row">
5. <label for="name">Name:</label>
6. <input type="text" name="name" id="name" />
7. <label for="email">Email:</label>
8. <input type="text" name="email" id="email" />
9. </div>
10. <div class="row">
11. <label for="male">Male</label>
12. <input type="checkbox" value="male" id="male" name="male" />
13. <label for="female">Female</label>
14. <input type="checkbox" value="female" id="female" name="female" />
15. <label for="country">Country:</label>
16. <select name="country" id="country">
17. <option value="USA">USA</option>
18. <option value="Italy">Italy</option>
19. </select>
20. </div>
21. <div class="row">
22. <h2>Comments</h2>
23. <textarea rows="10" cols="40"></textarea>
24. </div>
25. <div class="row">
26. <input type="submit" id="btn" name="btn" value="Send" />
27. </div>
28. </fieldset>
29. </form>

View the example

We're going to stylize the following elements:

1. form
2. fieldset
3. legend
4. label
5. input as:
   • text field
   • checkbox
   • submit button
6. select
7. textarea

Note that we've used proper attributes for each element, due to accessibility reasons.

General styles

The following styles set only the backbone for further and more advanced styles.

Listing 2. General styles

1. form, fieldset {
2. margin: 0;
3. padding: 0;
4. }
5. form {
6. width: 500px;
7. background: #ffe;
8. color: #000;
9. font: small Verdana, sans-serif;
10. }

View the example

We've resetted the default margin and padding on the form and fieldset elements. Then we've specified a width for our form, plus font and colors.

Adding some padding to the form

We need some vertical padding to create a certain amount of vertical spaces above and below the blocks. So we can write the following:

Listing 3. Adding some padding to the form

1. form {
2. padding: 1em 0;
3. }

View the example

Fieldset and legend

Now we can start stylizing the fieldset and legend elements. The styles are the following:

Listing 4. Fieldset and legend

1. fieldset {
2. display: block;
3. width: 90%;
4. margin: 0 auto;
5. border: 1px solid #666;
6. }
7. legend {
8. padding: 0 0.2em;
9. background: #c00;
10. color: #fff;
11. font-weight: bold;
12. text-transform: uppercase;
13. margin-left: 0.5em;
14. }

View the example

fieldset is actually a block-level element, but we've declared it explicitly in order to prevent browsers from applying their internal algorithms for handling form elements. Then we've specified a width and we've centered this element through horizontal automatic margins. On the contrary, legend is an inline element, so we've only added a left margin and some horizontal padding. Just for the record, Internet Explorer 7 (and lower) doesn't need a left margin to keep this element separated from the fieldset's left border, so we've used the following code only for Internet Explorer:

Listing 5. Code for Internet Explorer on the legend element

1. <!--[if lt IE 8]>
2. <style type="text/css" media="screen">
3. legend {margin-left: 0}
4. </style>
5. <![endif]-->

What's more, legend is one of those elements that is actually "locked" by browser's algorithms so that we can specify only a few styles on it.

Creating centered rows

After centering the main content of our form, we want to center the other elements. This can be done very easily.

Listing 6. Creating centered rows

1. div.row {
2. width: 90%;
3. margin: 0 auto;
4. padding: 1em 0;
5. }

View the example

We use vertical padding instead of margins in order to avoid some problems with Internet Explorer 7 (and lower), namely the wrong computation of margins in a form.

Input and label

Now we can stylize the text fields and the label elements.

Listing 7. Input and label

1. label {
2. vertical-align: middle;
3. font-weight: bold;
4. }
5. input {
6. font: 1em Verdana, sans-serif;
7. vertical-align: middle;
8. }
9. input#name, input#email {
10. width: 100px;
11. border: 1px solid #c00;
12. background: #fff;
13. }

View the example

To vertically align the elements, we've used the vertical-align property set to middle. Another important thing to keep in mind is that the actual dimensions of text fields are determined by the type and size of the font in use. For that reason, we've specified a font family and a font size on each input element, so that the vertical alignment can be handled correctly.

However, the rendering of checkboxes is really inconsistent, so we've skipped these elements. Again, this kind of elements seems to be "locked" by the default algorithms of most browsers.

Select

The styles for the select element are really simple.

Listing 8. Select

1. select {
2. font: 1em Verdana, sans-serif;
3. vertical-align: middle;
4. width: 95px;
5. }

View the example

As for the input element, we've vertically aligned this element and specified the same font family and size used above. In this case, Internet Explorer 7 (and lower) has some problems with the specified width, so it needs the following code:

Listing 9. Code for Internet Explorer on the select element

1. <!--[if lt IE 8]>
2. <style type="text/css" media="screen">
3. select {width: 99px}
4. </style>
5. <![endif]-->

However, the rendering of the option elements is really inconsistent, so we've skipped these elements. Again, this kind of elements seems to be "locked" by the default algorithms of most browsers.

Textarea and submit button

These elements have the following styles:

Listing 10. Textarea and submit button

1. textarea {
2. display: block;
3. width: 100%;
4. background: #fff;
5. border: 1px solid #c00;
6. font: 1em Verdana, sans-serif;
7. overflow: auto;
8. }
9. input#btn {
10. background: #c00;
11. border: 1px solid #800;
12. color: #fff;
13. font-weight: bold;
14. }

View the example

The textarea element is an inline-block element, so we've declared it as a block-level element. The declaration overflow: auto should prevent browsers from showing the trackbar for the vertical scrollbar, but this solution doesn't work in all cases. What's more, Internet Explorer 7 (and lower) has some problems with the correct calculation of the width of the element and it needs the following code:

Listing 11. Code for Internet Explorer on the textarea element

1. <!--[if lt IE 8]>
2. <style type="text/css" media="screen">
3. textarea {width: 99%}
4. </style>
5. <![endif]-->

Final screenshots

Our final layout appears as follows in the four major browsers.

1. 

   Firefox

2. 

   Internet Explorer

3. 

   Opera

4. 

   Safari

Download examples

examples.zip