Learning how to style forms with CSS is a great way to improve the look of your website. HTML forms are arguably one of the ugliest things on most web pages. They are often boring and utilitarian and don't offer much in the way of style.
But with CSS, that can all change. And combining CSS with the more advanced form tags can get you some really nice looking forms.
Style Forms By Changing the Colors
Just as with text, you can change the foreground and background colors of form elements. An easy way to change the background color of nearly every form element is to use the background-color property on the input tag:
input {
background-color : #9cf;
color : #000;
}
For example, this form has a blue background color on all the elements.
To change the background color of all the form elements, just add textarea and select to the style:
input, textarea, select {
background-color : #9cf;
color : #000;
}
And now the textarea and drop-down menu have a blue background color.
Be sure to change the text color if you make your background color dark. Contrasting colors help make the form elements more legibl. For example, a dark red background color will be much more easily read if the text color is white:
input, textarea, select {
background-color : #c00;
color : #fff;
}
This dark red background is fairly legible with a white foreground (text) color.
You can even put a background color on the form tag itself. Remember that the forms tag is a block element, so the color will fill in the entire rectangle, not just the locations of the elements.
form {
background-color : #ffc;
}
The form in this example has a yellow background that makes it stand out more.
Adding Borders to Your Forms Can Give them More Style
As with colors, you can also change the bordersof various form elements. You can add a single border around the whole form. Be sure to add padding, or your form elements will be jammed right up next to the border:
form {
border : 1px solid #000;
padding : 5px;
}
I like to put a border around my forms as that gives them a clear edge and boundary from the rest of the page.
But you can put borders around more than just the form itself. Change the border of the input items to make them look prettier:
input {
border : 2px dashed #c00;
}
Be careful when you put borders on input boxes as they look less like input boxes then, and some people may not realize they can fill in the form.
Style a Form with all the Different Style Features
By putting together your form elements with thought and some CSS, you can set up a nice looking form that matches the design and layout of your site. Here's the CSS I might use for a form on About:
form {
border : 1px solid #000;
padding : 5px;
}
input.submit {
background-color : #c00;
color : #ccc;
font : bold 14px/14px verdana, geneva, helvetica;
border : 2px solid #ccc;
}
.bright {
color : #c00;
font : bold 12px/12px verdana, geneva, helvetica;
}
input.bright {
border : 1px solid #c00;
}
.faded {
color : #ccc;
font : normal 12px/12px verdana, geneva, helvetica;
}
input.faded {
border : 1px solid #ccc;
}
And here is what the styled form would look like.
This article is part of the HTML Forms Tutorial
