Make your own free website on Tripod.com


Getting Started
Editors
Design Tips
Home



HTML:

The Basics
Adding Color
Adding Images
Backgrounds
Links
Text Format
Page Format
Tables
Frames
Forms



More Than HTML:

Audio
Meta Tags
JavaScript
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
Fonts
Midis


 

 


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:

Comments:

 


Copyright © 2004 - 2005 S &W Concepts