Colorize Your Web Page Forms using CSS

Using CSS (cascading style sheets) it is quick and easy to colorize these web page form properties: background color, typed text within the form fields and form submit buttons. The most effective way to do this is to create a custom class within an external style sheet. This article will teach you how to colorize your forms using the external style sheet method.

If you are not sure why you would want to use web page forms at all, read our article, "HTML Forms: Is Your Site Interactive?" to get ideas on how utilizing web forms can help automate, grow, and increase your web site sales and targeted visitors.

Let's begin by giving you a code snippet to add to your external style sheet. Simply copy/paste it into your external style sheet. If you are a BasicTemplates.com member, you currently have 600+ external style sheets to choose from (along with the same quantity of predesigned web site templates):

.form { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: red; background: yellow; color: blue; }
.btn { font-weight: bold; color: yellow; background-color: blue;}

Then assign the custom class to the appropriate HTML form tags. Above we assigned the class "form" to the "textarea" tag:
<textarea name="textfield" cols="45" rows="6" class="form">Go ahead and type text into this field. You will see that it will take on a blue color as stated in the CSS code shown above.</textarea>

Then we assigned the "btn" class to the HTML input tag:
<input type="submit" name="Submit" value="Submit" class="btn">

Want colored scrollbars in your form too? Read our previous article, "Jazz Up Your Site with Colored Scrollbars". Simply add the scrollbar snippet to the end of the "form" class shown above!

Be sure to click on the "View Live Example" icon above to see this CSS effect live in action.