Changing the look of your forms is a great way to personalize your pages. Adding borders, background colors and alignment to your forms are all possible. Here are some examples of how to use CSS to customize your forms and input fields.

Example 1:

input, textarea {
border: 1px solid #555;
background-color: #cde;
}

By using example 1, all input fields and all textareas will have a dark grey border with a light blue-grey background color.

Example 2:

input[type="submit"] {
border: 1px solid #555;
background-color: #cde;
}

In example 2, only the input field of type “submit” will have a border of dark grey and a background color of light blue-grey. You can specify the type of input in square brackets and only those input fields that match the type specified in your CSS will have a custom style applied to it.

Here’s a list of all input types for forms:

• submit ( type=”submit” )
• text ( type=”text” )
• image ( type=”image” )
• password ( type=”password” )
• checkbox ( type=”checkbox” )
• radio ( type=”radio” )
• reset ( type=”reset” )
• file ( type=”file” )
• hidden ( type=”hidden” )
• image ( type=”image” )
• button ( type=”button” )

Of course, there isn’t much point in adding a style to the input type, “hidden”. As the name suggests, the contents of the input field is not visible on the web page.