HTML forms are probably one of the ugliest things to hit the Web ever. They are generally boring and utilitarian and don't offer much in the way of good looks. Add in the fact that with XHTML 1.1, you can't use tables for layout, and it seems that forms are doomed to dullsville.
But with CSS, that can all change. And combining CSS with the more advanced form tags can get you some really nice looking forms.
Changing Colors
Just like with text, you can change the 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 element:
input {
background-color : #9cf;
color : #000;
}
See it in Action
To get all the form elements, just add textarea and select to the input line of the
style:
input, textarea, select {
background-color : #9cf;
color : #000;
}
See it in Action
Be sure to change the text color if you make your background color dark. 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;
}
See it in Action
You can even set up background colors 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;
}
See it in Action
Borders
As with colors, you can also 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:
form {
border : 1px solid #000;
padding : 5px;
}
See it in Action
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;
}
See it in Action
Putting it All Together
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;
}
See it in Action
