Colin Smiley - Melts in your mouth, not in your hands

Style Forms With CSS

Ever wonder how sites make their forms look more attractive with CSS?

Looks nice, Right?
Here is how you do that.
First. The CSS Code (Put this in your existing stylesheet):

#form_area input, #contact-area textarea {
padding: 5px;
width: 400px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #f00780;
background: #f0f3f5;
}

#form_area textarea {
height: 90px;
}

#form_area textarea:focus, #contact-area input:focus {
border: 2px solid #cccccc;
}

Now I will explain this code, and how to customize it to match the rest of your site.

This says that the input boxes and textareas need to be styled as.
2nd Line - The width of your boxes
3rd Line - The font
4th Line - The Font's Size
5th Line - Margin (the 10px separates the boxes a little.)
6th Line - Border - Change this to what you want... (This is the border of the unselected boxes... The grayish color in the example.)
7th Line - Background - The background image of your input boxes

#form_area textarea {
height: 90px;
}

The code above specifys what the height of the large text area box needs to be... Change it if you want.

#form_area textarea:focus, #contact-area input:focus {
border: 2px solid #cccccc;
}

This is the code that makes the border's color change when highlighted, Change the #cccccc to what ever color you want.
Now that you have it customized, Put the following code before your form:

And the following after your form:

</div>

That make it so the CSS code applys to the form,
All done. To see a live working example of this check out my contact page. If you get stuck or don't understand part of this tutorial, Contact me and I will try and help you.