Subscribe to SIM's Free Monthly
Free business startup tools and services Free Stuff
Newbie internet marketing guide Newbie Guide
marketing tips for new business startups Marketing Tips
internet marketing products with reseller rights. Our Products
Startup Internet Marketing business services Our Services

 - Marketing
 - Business/Sales
 - Website Design
 - Site Development

Unique Product and Services in Northern Ontario Uniquely Northern
Link to the Startup Internet Marketing website Add URL
about Startup Internet Marketing About Us
Startup Internet Marketing Home

Startup Internet Marketing information products

Cascading Style Sheets (CSS) - Colorful Forms

*Part 1 - Cascading Style Sheets (CSS): Getting Started
*Part 2 - Cascading Style Sheets (CSS): Learning More
If your web page forms are boring, you can spruce them up.

In this article you'll learn how to make your forms stand out from the crowd and/or to make one of your form fields stand out from the rest of your form. The instructions include how to modify:
  1. Text input fields

  2. Textarea input boxes

  3. Submit buttons
Checkboxes and radio buttons can have color assigned to them, too. But the effect is different among different browsers. Netscape 6 puts the assigned color inside the checkbox or radio button, for example, and IE5 puts the color on the outside. Because of the inconsistency, we won't include those form fields. But feel free to experiment.

(For those browsers that don't recognize CSS styles within form field tags, such as Netscape 4.#, the form simply appears as a regular form. Opera 6 recognizes font family, size, style, and weight, but not font or background color.)

In this article, you'll learn how to do the following for each of the form fields listed above:
  1. 1. Change the background color

  2. Put an image in the background

  3. Change the text color

  4. Change the text size

  5. Make the text bold

  6. Make the text italic
We'll use the seven CSS styles listed below to change the form fields from boring to noticeable. These styles are chosen for the dramatic changes they create rather than for acceptable design values. Once you see how it works, you can specify your own values.

The CSS styles specifying colors can be any color you want, specified as the color name or as a hex number. Example: black or #000000

The CSS font size can be any size you want. Similar with the font family name.

Here is the list we'll use in examples:
background: yellow;
background-image: url(image.gif);
color: blue;
font-weight: bold;
font-style: italic;
font-size: 36px;
font-family: serif;
The above can be mixed and matched as you please, except the background color and the background image -- when you use one, don't use the other.

Note: When the area to be covered is larger than the area of the image, the image will tile. If the area is smaller than the area of the image, the image will display beginning with the the top-left corner and be cropped at the edges of the area being covered.


If your page background color is yellow, make form field backgrounds yellow, too, instead of the light grey many browsers default to:
<input type="text" style="background: yellow;" name="whatever"> <textarea cols="22" rows="7" style="background: yellow;" name="whatever"> </textarea> <input type="submit" style="background: yellow;" value="Click Me">
Make the submit button really big:
<input type="submit" style="font-size: 36px;" value="Click Me">
And yellow, too:
<input type="submit" style="font-size: 36px; background: yellow;" value="Click Me">
Make it big and bold and blue and serif (instead of the usual default sans-serif type face) and with a yellow background:
<input type="submit" style="font-size: 36px; color: blue; font-weight: bold; font-family: serif; background: yellow;" value="Click Me">
Make a textarea box with an image of the Earth as seen from space. Let the text people type in be big and bold: What do you want to yell to the world?
<textarea cols="22" rows="7" style="font-size: 36px; font-weight: bold; background-image: url(image.gif);" name="whatever"> </textarea>
Make a text field with a yellow background so text typed in is big, blue, and italic:
<input type="text" style="background: yellow; font-style: italic; color: blue; font-size: 36px;" name="whatever">
In all of the above examples, the style attribute was of this format:
Simply put one or more specific styles in place of the underline. Specific styles are of this format:
name: value;
The list of specific styles in the style attribute can be on multiple lines, so long as the line breaks after the semi-colon. When putting specific styles on multiple lines, ensure that a quotation mark leads the first specific style and a quotation mark follows the last.

With what you learned here, you'll be able to create an almost infinite variety of appearances for your forms.


Instead of using a style attribute in each form field you want to change, you could put a CSS style for the INPUT and TEXTAREA form fields into the HEAD area of your page. All INPUT and TEXTAREA form fields will then get that style, automatically. (You can override the automatic style for individual form fields by using a style attribute as shown above.)

Here is an example CSS style for the HEAD area of a page. You can replace the background color with a background image, if you want. Or make any other changes you desire.
<STYLE TYPE="text/css"> <!-- INPUT, TEXTAREA { background: yellow; color: blue; font-weight: bold; font-style: italic; font-size: 36px; font-family: serif; } --> </STYLE>
Try the above with this form in the BODY area of the page:
<form> <input type="text">
<textarea cols="22" rows="5"></textarea>
<input type="submit"> </form>
It's quite dramatic :)

Will Bontrager

About the Author:
William Bontrager Programmer/Publisher,
"WillMaster Possibilities" ezine

The Healthy Back Institute
Get Lasting Relief From Back Pain, Neck Pain and Sciatica…

Free Insider Report
Receive free monthly marketing updates, tools, tips and strategies to help your online business succeed. Get immediate access to our bonus ebooks AND 150 back issues.

Keep Informed with our Free Monthly "Insider Report"


Site Navigation Guide
To Top

Startup Internet Marketing Resource Center Links
Home | Tools | eBooks | Email Tips | Search Tips | Services | Marketing | eCommerce | Classifieds | Newsletters | Resources | Website Promotion | Archives | Associates | Unique | Privacy | Contact

Copyright © 2000-2009 by Startup Internet Marketing Services* All rights reserved
104 Main Street.  Kirkland Lake,  ON,  CA  P2N 3E8  705.567.5850
This site is powered by