Setting the color of the scrollbar in Safari for Lion (OS X 10.7)

Question

The new scrollbars in Lion seem to adjust their color in Safari based on the background color of the body element. Is there a way to manually set whether the scrollbar should be dark or light? I know that there are CSS webkit options for styling the scrollbar, which actually preceded the new Lion scrollbars. My only problem using this method is that the panel no longer works like a real Lion, which disappears after scrolling. Although I believe that this could be done using CSS and javascript animations to recognize the start and end of the scroll, it would be nice to just use a real scroll bar without any “hacking”.

Answer 1

The Krinkle fix ( or similar ) is probably the best, but for those who are curious, it is somewhat possible to style the scroll bar in Lion, albeit an unusually annoying one. Here is the basic idea:

html { overflow: auto; } body { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; overflow-y: scroll; overflow-x: hidden; } ::-webkit-scrollbar { width: 7px; } ::-webkit-scrollbar-track { visibility: hidden; /* doesn't seem to work */ } ::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(0,0,0,0.5); } ::-webkit-scrollbar:window-inactive { visibility: hidden; } 

This is my closest approach to the Lion default black scrollbar. Here where I got it all: http://css-tricks.com/9130-custom-scrollbars-in-webkit/

Answer 2

Many thanks to @EdwardLoveall for his reply and related link. This is my variation on his approach for more iOS-style scrolling (I use Lion + Chrome 19).

 ::-webkit-scrollbar { background-color: black; width: 1.25em /* 20px / 16px */; } ::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.33333); border: 0.25em /* 4px / 16px */ solid black; border-radius: 1.25em /* 20px / 16px */; } 

As he noted, you cannot hide the track, but you can, but against this background. Creating a transparent background does not seem to work either because it is outside the HTML element, so there is only white below. Also, many properties like margin, padding, opacity, etc. do not seem to work, but you can add a thick border of the same color as the background to give the thumb a little breathing space.

Answer 3

From testing on Safari / Chrome, it seems like it is watching the background color of the body element and only the body element. Not like the area that is visually under the scroll bar.

Therefore, when your page has a dark body background color, it will automatically display a brighter contrast scroll bar.

For example, the following:

 html { background: white; } body { width: 50%; background: black; } 

will cause a white scroll bar (since the body background is black), however, the surface on which the floating bar scrolls (to the right of the html element) is white, therefore it is white on white (with a very gray gray frame). http://jsbin.com/oquduj/

Answer 4

The only way is to set the light / dark background to html / body so that the scroll bar has the opposite color and after that it adds the desired background to the wrapper.

 html,body { height: 100%; background: #000; } .wrap { height: 100%; background: #FFF; } 

height: 100%; designed to stretch the wrapper with a small content.