Using CSS (Cascading Style Sheets) Style Tags to Customize Your HTML Web
Page Form Background Color (IE)
|
You can completely
customize the look of your forms simply by using CSS (Cascading Style Sheets)
STYLE tags.
The following example displays a form with colored scrollbars, buttons and
text. Copy and paste the following code into your HTML and customize where
indicated in red.
<FORM
METHOD=post
ACTION="/cgi-bin/example.cgi">
<TEXTAREA wrap="virtual" name="comments" rows=6 cols=20
STYLE="scrollbar-face-color: #317B9C;
scrollbar-track-color: #87B4C9;
scrollbar-arrow-color: #54A1C4; scrollbar-3dlight-color:
#B8D7E6; scrollbar-shadow-color:
#1E6180; scrollbar-highlight-color: #7CBCDA;
scrollbar-darkshadow-color:
#1E6180">This example displays the scrollbars
in an alternative color. You can change these colors to whatever you'd like
simply be changing the hexadecimal color codes indicated in
red.</TEXTAREA>
<INPUT type="Submit" VALUE="Submit"
STYLE="color:#FFFFFF; background:
#317B9C; font-weight: bold">
</FORM> |
Browser View:
The following
example displays a form with colored scrollbars and text. The text is displayed
in a specific font and the face of the button displays an image background.
Copy and paste the following code into your HTML and customize where indicated
in red.
<FORM
METHOD=post
ACTION="/cgi-bin/example.cgi">
<TEXTAREA wrap="virtual" name="comments" rows=6 cols=20
STYLE="scrollbar-face-color: #317B9C;
scrollbar-track-color: #87B4C9;
scrollbar-arrow-color: #54A1C4; scrollbar-3dlight-color:
#B8D7E6; scrollbar-shadow-color:
#1E6180; scrollbar-highlight-color: #7CBCDA;
scrollbar-darkshadow-color:
#1E6180">This example displays the scrollbars
in an alternative color. You can change these colors to whatever you'd like
simply be changing the hexadecimal color codes indicated in
red.</TEXTAREA>
<INPUT type="Submit" VALUE="Submit" STYLE="color:
#FFFFFF; background:
url(yourimage.gif); font-family:
Verdana, Helvetica; font-weight:
bold">
</FORM> |
Browser View:
The following example displays a form with a colored background, scrollbars
and text. The text is displayed in a specific font and the face of the button
displays an image background. Copy and paste the following code into your
HTML and customize where indicated in
red.
<FORM
METHOD=post
ACTION="/cgi-bin/example.cgi">
<TEXTAREA wrap="virtual" name="comments" rows=6 cols=20
STYLE="background:#EAE8E8; scrollbar-face-color:
#317B9C; scrollbar-track-color:
#87B4C9; scrollbar-arrow-color:
#54A1C4; scrollbar-3dlight-color: #B8D7E6;
scrollbar-shadow-color: #1E6180;
scrollbar-highlight-color: #7CBCDA;
scrollbar-darkshadow-color:
#1E6180">This example displays the scrollbars
in an alternative color. You can change these colors to whatever you'd like
simply be changing the hexadecimal color codes indicated in
red.</TEXTAREA>
<INPUT type="Submit" VALUE="Submit" STYLE="color:
#FFFFFF; background:
url(yourimage.gif); font-family:
Verdana, Helvetica; font-weight:
bold">
</FORM> |
Browser View:
Keep in mind, if you change the colors of your scrollbars and buttons, make
sure your selected colors match your website's color scheme. In addition,
always make sure your text is clearly visible through your background
colors.
This is just
one small example of how you can use CSS (Cascading Style Sheets) Style Tags
within your web page. For additional information on CSS, visit the
CSS Tutorial
section.
More Web Design
Tips |
