Reset the CSS on these scrollbars!

December 10, 2008 8:37 AM

A framework I'm using styles scrollbars in an ugly way. Other CSS elements have a setting of "None" to effectively reset the style to the browser's default. Scrollbar styling doesn't have a "None" so once the style is applied by the framework there's no going back. How can I reset the scrollbar CSS to defer styling back to the browser?

For reasons beyond the scope of this question I cannot modify the framework's CSS in any way. Sucks, but all I'm really able to do is apply styles over any that are set by the framework CSS.

posted by sub-culture to computers & internet (6 comments total)

If you can create your own stylesheets, can you add a scrollbar style set to "none" and add !important to it? If I'm understanding the situation correctly, that should override the framework's styles.
posted by MadamM at 9:04 AM on December 10, 2008

Part of the issue is that the scrollbar elements aren't real CSS elements, they're proprietary. So I don't think you can reset styling to browser, but you can redefine the scrollbar colors to be the same as the browser defaults.

Try this:

body, html {
scrollbar-face-color: ThreeDFace !important;
scrollbar-shadow-color: ThreeDDarkShadow !important;
scrollbar-highlight-color: ThreeDHighlight !important;
scrollbar-3dlight-color: ThreeDLightShadow !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-track-color: Scrollbar !important;
scrollbar-arrow-color: ButtonText !important;
}
posted by Jairus at 9:22 AM on December 10, 2008 [1 favorite has favorites]

This is an interesting problem... I was going to post the same solution as Jarius. I'm using Windows XP, and found that custom scrollbar CSS had no effect in Firefox, but it did change the appearance of scrollbars in Internet Explorer. Using the code Jarius posted fixes the problem somewhat in that the scrollbars return to a generic "system" look, but for some reason they don't actually match the scrollbars I usually see in Internet Explorer, which are light blue instead of grey. But it sounds like this will be close enough to solve your problem.

Explanation of the CSS Jairus posted.
posted by oulipian at 9:32 AM on December 10, 2008

Also, you might want to apply that CSS to "textarea" as well as "body, html".
posted by oulipian at 9:37 AM on December 10, 2008

Thanks, Jairus! I just got this link from a dev in our group...
posted by sub-culture at 9:40 AM on December 10, 2008

I am by no means a scrollbar styling wizard -- I avoid dealing with them at all cost -- but as a general CSS-y tip which may or may not apply in this instance:

instead of "none" you would want to use "auto" anyway -- you are not removing styles, you are using the default style (which has the effect of removing the unwanted styles)
posted by misterbrandt at 12:45 PM on December 10, 2008