Whether your main business is Web design or backend development, chances are you spend a fair amount of time creating forms for user input. So you already know that the default appearance of forms isn't always appropriate for the look and feel of your site.
In this article we'll look at how you can use CSS to create attractive and usable forms.
Styling Form Elements
It's possible to change the default look of form elements by styling their html tags: input, select and textarea.
The input Tag
Defining rules for the input tag will change any instance of that tag in your document. For example, if I wish all elements to have a purple background, I could define the following in my style sheet.
input {
background-color: #666699;
}
This will add a purple background color to those elements that are marked up using the input tag.
1166_image1 (click to view image)
The select Tag
The tag creates a list menu. You can create rules for select which will affect any list menus in your document.
select {
background-color: #666699;
color: #ffffff;
}
1166_image2 (click to view image)
The textarea Tag
The