TEXTAREA Scroll Bar Styles

[HumanClay]

I have a question. I have set the scrollbar for the browser window to a different color using CSS. (like the scroll bar on this page --> ) I have a textarea box on my page, and the scrollbar is set to the same color. I was wondering how I would set it to the default scrollbar color. I assume you would use the same CSS properties as I used to change the window scrollbar, but what is the default color values?

[creole]

Create a class that contains the same declarations as the BODY tag, then simply say <textarea class="xxx">.

[HumanClay]

I know how to do that. I'm asking how to give the textarea scrollbars the default color (as they would appear if I never gave the page scrollbars a color). Is that possible?

[creole]

Well, you mean the users default system colors? The user should see their default system colors unless you are specifically changing the TEXTAREA tag with CSS. I don't use those declarations much so I'm not the best advisor on this particular area of CSS.

[isotope235]

Sounds like the scrollbar for the text area is inheriting the properties you've assigned to the browser's scrollbar?

Since the scrollbar stuff only works in IE you may be able to use viewInheritStyle to break the inheritance. I've never tried implementing this, but perhaps it can help.

Sorry, can't help on the defualt colors for IE, although if someone else does, using a class for your text area would probably be easier than the method above.

[HumanClay]

Well I did this:

BODY {
scrollbar-face-color: #666666; scrollbar-shadow-color: #000000;;
scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #777777;
scrollbar-darkshadow-color: #333333; scrollbar-track-color: #484848;
scrollbar-arrow-color: #000000
}

And when the page loads, a textarea box has those same colors for it's scrollbars.

[creole]

Hmmm...sounds like you might not be able to get around that. You could take a chance and make the TEXTAREA Windows default colors (blue/grey) by assigning is a class of it's own, but I don't know if that would work properly.

[HumanClay]

I just created a new class and assigned it to the textarea. I did as you said, setting it to generic grey colors (not sure if they are the default on Windows, but it looks close to it). That works. I guess I'll have to live with that

[creole]

If yo uwant it exact, then just take a screenshot of a regular window, open it in Photoshop (or your image editor) and sample the colors directly.

[HumanClay]

Actually, that's what I did... except I can't remember if I changed the colors of the scrollbars in Windows. And I didn't feel like changing the theme to the Windows default to be sure. It looks close enough for me, so I'm happy

[weirdbeardmt]

I have no idea whether or not this attribute exists, but it's worth a shot, especially as I love pointing out the obvious (in the vain hope that it might work)..

scrollbar-face-color: default; scrollbar-shadow-color: default;

??

[WiccaMan]

I'm experiencing this too, but I liked what it did to my site, so my query is - how to color the scrollbars inside a <select> tag? I tried every which way, so I don't think it can be done.

[HumanClay]

To change the colors of scrollbars in a <select> do this in your style sheet:

SELECT {
scrollbar-face-color: #666666; scrollbar-shadow-color: #000000;;
scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #777777;
scrollbar-darkshadow-color: #333333; scrollbar-track-color: #484848;
scrollbar-arrow-color: #000000
}

[WiccaMan]

I tried that, HumanClay. It didn't work.

[tubedogg]

Currently changing a <select> form element isn't possible. I can't remember if it's in the CSS spec that way (I suspect not) but none of the browsers support it.