COLOUR YOUR SCROLLBARS (IE 5.5+) Text area | Select area | Input area | CSS Styling | | Here is a cool way to easily change your scrollbars to the colours you want. Just add this CSS script to your Head Tag, and be sure to replace the word #colour with whatever colour you want: e.g. #003366 |
<style>
BODY
{
scrollbar-face-color:#color;
scrollbar-shadow-color: #color;
scrollbar-highlight-color: #color;
scrollbar-3dlight-color: #color;
scrollbar-darkshadow-color: #color;
scrollbar-track-color: #color;
scrollbar-arrow-color: #color;
}
</style>
NOTE:
While these effects only work in advanced versions of Internet Explorer, we realize that not everyone uses -- or wants to use -- such browsers. Still, before you write to us to blast us for our "conspiracy" to promote Microsoft, please remember: we didn't start the browser wars! Now, if you want to get really fancy, scrollbars can also appear in form elements, such as the Text area, Select, or even a simple Input Tag. These can also be customized in the same way (with some additional parameters for fonts and area colours): Top 1) Textarea tag
<style>
TEXTAREA
{
font : 8pt tahoma;
color: #000022;
background-color: #C2D5E7;
border-color: #000044;
border-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-style: single;
scrollbar-3dlight-color: #000055;
scrollbar-arrow-color: #000055;
scrollbar-base-color:#E9F7ED;
scrollbar-darkshadow-color: #E9F7ED;
scrollbar-face-color: #E9F7ED;
scrollbar-highlight-color: #E9F7ED;
scrollbar-shadow-color: #000055;
}
</style>
| | | Top 2) select area tag
<style>
SELECT
{
font : 8pt verdana;
color: #000022;
background-color: #C2D5E7;
border-color: #000044;
border-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-style: dashed;
}
</style>
| Top 3) Input tag
<style>
INPUT
{
font : 8pt verdana;
color: #000022;
background-color: #C2D5E7;
border-color: #000044;
border-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-style: single;
}
</style>
|
CSS Styling
CSS is a great way to add "style" to the graphical output of HTML pages. Look at the two samples below, a form text area and an input button. See how they have been spiced up with CSS Styles!
| Code: <textarea style="background-color:000000; color:ffffff; font-family:verdana,arial,helvetica; font-size:10pt;">White Text!</textarea> |
Of course not all of these attributes will be processed by all browsers, so it is always a good idea to define attributes in raw HTML wherever possible also. For example, the SPAN tag is a handy tool you can use to define attributes of fonts, table cells etc. But these attributes may not display properly in older browsers. To get the best display, we hard code HTML values outside of the SPAN tag. Here is an example:
This text is red.
Code: <font color="0000ff"><span style="color:ff0000;">Text here</span></font> Now, why would you want to complicate things by using both CSS and HTML? Because there are many more attributes available in CSS. For instance, we could set an abnormal font size, mouse-over effect or other attributes to this font, which will not display by old browsers. The HTML coding outside of our span ensures at least a likeness of our span characteristics for such browsers.
Here is an example of a CSS Style for the Table Cell tag:
| Code: <td style="background:000000; font-family:arial; text-decoration:underline;"> |
|
|
