Styling Form Elements
You can literally change the default appearance of some form elements by styling the corresponding HTML tags—the select and textarea. Well. This is not something rare because as you can see there is a lot to CSS than meets the eye. In this post you’ll learn all about to make web forms via CSS styling. And Rachel Andrew of edgeofmyseat.com has some cool things to say about that.

The input Tag
Let’s say I want to have my elements some purple background. Here’s how I will do it in my style sheet.
input {
background-color: #666699;
}
See how simple and neat the codes are?

The select Tag
Now, let’s say you want a list menu, the <select> allows you do that. You can create rules for select which will affect any list menus in your document.
select {
background-color: #666699;
color: #ffffff;
}

The textarea Tag
If you want to mark up all the multiple line text input field, you only have to use the <textarea> to do that. Once again, setting rules for textarea will change the look of all of these elements in your document.
textarea {
background-color: #666699;
color: #ffffff;
}

The form Tag
If you want to style the form tag itself, adding borders, background colors and adjusting the margins and padding. Form is a block level element, so you can change the way it displays in much the same way that you would style a paragraph.
form {
border: 1px solid #666699;
padding: 5px;
}

Creating Classes for Form Elements
Perhaps, you want your forms to be more stylish and unique and remove all those funny looking small boxes. That can be done too using CSS. The thing is so easy to do and you’ll be surprised by the effects once you render the whole ting in your web browser.

You can create classes and apply them to individual form elements. For example, this class in the style sheet:
.texta {
font-size: 10px;
background-color: #CCCCCC;
border: 1px solid #666666;
}
can be applied to a form element like so:
<input name=”textfield” type=”text” class=”texta” />
Any other form elements or input tags in the document will remain unstyled, as this class is not applied to them.

Tags: Usable Web Forms ala CSS