Style Forms With CSS

Learn to Use CSS to Style Forms

Young Office Employee Using a Laptop
Cavan Images/Stone/Getty Images

Learning how to style forms with CSS is a great way to improve the look of your website. HTML forms are arguably among the ugliest things on most web pages. They are often boring and utilitarian and don't offer much in the way of style.

With CSS, that can change. Combining CSS with the more advanced form tags can deliver some nice-looking forms.

Change 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. For example, this code applies a blue background color (#9cf) on all the elements.

input {
  background-color : #9cf;
  color : #000;
}

To change the background color of only certain form elements, just add textarea and select to the style. For example:

input, textarea, select {
  background-color : #9cf;
  color : #000;
}

Be sure to change the text color if you make your background color dark. Contrasting colors help make the form elements more legible. For example, text on a dark red background color is much more easily read if the text color is white. For example, this code places white text on a red background.

input, textarea, select {
  background-color : #c00;
  color : #fff;
}

You can even put a background color on the form tag itself. Remember that the form tag is a block element, so the color fills in the entire rectangle, not just the locations of the elements.

You can add a yellow background to a block element to make the area stand out, like this:

form {
  background-color : #ffc;
}

Add Borders 

As with colors, you can change the borders of 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.

Here's an example of code for a 1 pixel black border with 5 pixels of padding:

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

You can put borders around more than just the form itself. Change the border of the input items to make them stand out:

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.

Combine Style Features

By putting together your form elements with thought and some CSS, you can set up a nice looking form that complements the design and layout of your site.