Getting Started
Design Tips


The Basics
Adding Color
Adding Images
Text Format
Page Format

More Than HTML:

Meta Tags
Cut & Paste JScripts
Style Sheets
IE with Style
>>IE Form Colors
MS Trans. Effects
Special Character Set

Help Desk:
Quick Reference

Free Stuff:

Graphic Designs



Changing Form Field and Button Colors

IE 4.0+, Netscape 7.0+, and Firefox users will be able to see the color changes on this page. Earlier browsers will not be able to view this page correctly.

Changing the colors of form fields and buttons are done with style sheet properties.

Form Field Colors:

Here's how it's done:

<input type="text" style="color:blue; background-color:pink; border-width: 5px; border-color:red" value="Form Text Field" size=40>

The colors can be specified by either the color name or the RGB value. Properties are:

  • color:
  • background-color:
  • background-image: url('path/filename.ext')
  • border-color:
  • border-width:
  • scrollbar-base-color: (textarea only)
  • scrollbar-arrow-color: (textarea only)
  • scrollbar-DarkShadow-color: (textarea only)

To use an image for the background of a form field you will need to specify where the browser is to find the image:

The Code:

<textarea style="background-image: url('path/fireworks.gif'); color:white; border-width: 8px; border-color:lightblue; scrollbar-base-color:black; scrollbar-DarkShadow-color:white; scrollbar-arrow-color: gold;" cols=20 rows=10>The text inside the box</textarea>

Some properties do not apply to some form elements. Such as, the background-image does not apply to select boxes, and border-color and border-width do not apply to checkboxes and radio buttons. So when creating forms with style properties, don't get crazy when a certain property will not work the way you want it to.

Form Buttons


Here's how it's done:

<input type="button" value="Button 1" style="color:darkgreen; border-color:darkgreen; border-width:5px; background-color:yellow;">
<input type="button" value="Button 2" style="color:white; border-width:0px; background-color:purple">

All style propertyies listed above will apply to buttons.

Sample form with style:

Note: This is only a sample form. Entries submitted via this form will not be linked on this site.

Your Name:

Your URL:

Your Occupation:



Copyright © 2004 - 2005 S &W Concepts