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:
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: