Scrolling Bar Appearance

[mechro99]

Hi,

Probably a simple one again! I was wondering how to change the look of the scrolling bar on a field I'm creating.

the site is

http://kinnemeyerracing.com.

The field is on the right side.

I'd like to change the scroll bar appearance, for instance, the way it appears on the field used at

http://bottomlinepunk.com

Any ideas?

Thanks,
Dan

 

[dwarfthrower]

All done with cascading stylesheets. Just to clarify, bottomlinepunk.com uses an iframe rather than a field, but the method is the same.

For an iframe - add the following style-sheet code to the document appearing in the iframe:
[tt]
<style>
BODY {
scrollbar-face-color: #A45B41;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #8D3211;
scrollbar-darkshadow-color: #8D3211;
scrollbar-track-color: #ECEAE5;
scrollbar-arrow-color: #FFFFFF;
background-color: #F3F1EE;
}
</style>
[/tt]

Or for a traditional text field, redefine the textarea element like so:
[tt]
<style>
TEXTAREA {
scrollbar-face-color: #A45B41;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #8D3211;
scrollbar-darkshadow-color: #8D3211;
scrollbar-track-color: #ECEAE5;
scrollbar-arrow-color: #FFFFFF;
background-color: #F3F1EE;
}
</style>
[/tt]

 

[mechro99]

Okay, thanks.

How do you use the CSS to just affect the field, and not the browser's main scrollbar. Is that possible?

 

[dwarfthrower]

Like this.

In the head of your document, declare a custom style:
[tt]<style>
.thisFieldIsSpeshul {
scrollbar-face-color: #A45B41;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #8D3211;
scrollbar-darkshadow-color: #8D3211;
scrollbar-track-color: #ECEAE5;
scrollbar-arrow-color: #FFFFFF;
background-color: #F3F1EE;
}
</style>[/tt]

Then when you declare the field in your HTML, add a class attribute:
[tt]<textarea name=&quot;textarea&quot; cols=&quot;60&quot; rows=&quot;12&quot; class=&quot;thisFieldIsSpeshul&quot;></textarea>[/tt]

 

[mechro99]

Great. Thanks for the tips.