Scrollbars and Forms

IE5.5 gives designers the opportunity to color code the browser scrollbars. If you are using IE5.5 you can see the effect on andysstuff. Scrollbar color effects do not work on Netscape (I have not been able to test on the Mac at this time).

To implement scrollbar colors into your site, add the following to your style sheet:


BODY{

scrollbar-3dlight-color:COLOR_VALUE;

scrollbar-arrow-color:COLOR_VALUE;

scrollbar-base-color:COLOR_VALUE;

scrollbar-darkshadow-color:COLOR_VALUE;

scrollbar-face-color:COLOR_VALUE;

scrollbar-highlight-color:COLOR_VALUE;

scrollbar-shadow-color:COLOR_VALUE;

scrollbar-track-color:COLOR_VALUE;

}

Note: you don't have to use all of the above - andysstuff only uses :
scrollbar-base-color: COLOR_VALUE;
scrollbar-arrow-color: COLOR_VALUE;
scrollbar-DarkShadow-Color: COLOR_VALUE;

Here is an example of the areas affected by setting individual values . The style value used is on the left and an example on the right (highlighted in red).

style value	effect
scrollbar-3dlight-color:
scrollbar-arrow-color:
scrollbar-base-color:
scrollbar-darkshadow-color:
scrollbar-face-color:
scrollbar-highlight-color:
scrollbar-shadow-color:
scrollbar-track-color:

You can also color co-ordinate your forms by using document elements such as background-color, font color etc using the following syntax in your style declaration.

background-color:#0099ff;font:normal 10pt verdana;color:white;

Textarea :	This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. By adding scrollbar values to your form style, the textarea scrollbars can also be customised.
Select :
Text :
Submit :
Reset :

It is also possible to use images instead of background colors using :

Textarea :	This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide.
Select :	Note background image is not applied to the select form element. *Mozilla displays the image on the top line only
Text :
Submit :
Reset :

The form style examples I have used on this page should be avoided I have used extreme colors and images just to show the effect. The more subtle the style - the greater the impact.

You must make sure you are using one of the newer browsers to see all the examples in this page. If the forms look just like ordinary forms with no colors or images applied to them then it's time to upgrade.

form highlighting>>>

[back to top of page]

[

] [

]

Search
	[ Web] [ WebDevTips]