Adobe AIR Scrollbars in Mac OSX

If you are just getting started with Adobe AIR development, it might come as a bit of a surprise to see the scrollbar implementation on OSX. They're not even close to the native WebKit implementation. Check it out:

Fugly ... I don't know where these scrollbars came from. I wonder if they're the default Flash styled scrollbars. Or if they're using the default windows scrollbars and didn't bother making specific scrollbars for mac AIR users.

Regardless, with some WebKit specific CSS declarations, you can actually manage to style the scrollbars:

::-webkit-scrollbar-button:horizontal {
 background-image:;
 background-repeat: repeat;
}
::-webkit-scrollbar-button:horizontal:decrement {
 background-image: url(../images/chrome/scroll_arrow-left.png), url(../images/chrome/scroll_arrowbox-horizontal.png);
 background-repeat: no-repeat, repeat;
 background-position: 2px 2px, 0 0;
}
::-webkit-scrollbar-button:horizontal:increment {
 background-image: url(../images/chrome/scroll_arrow-right.png), url(../images/chrome/scroll_arrowbox-horizontal.png);
 background-repeat: no-repeat, repeat;
 background-position: 2px 2px, 0 0;
}
::-webkit-scrollbar-button:vertical:decrement {
 background-image: url(../images/chrome/scroll_arrow-up.png), url(../images/chrome/scroll_arrowbox-vertical.png);
 background-repeat: no-repeat, repeat;
 background-position: 2px 3px, 0 0;
}
::-webkit-scrollbar-button:vertical:increment {
 background-image: url(../images/chrome/scroll_arrow-down.png), url(../images/chrome/scroll_arrowbox-vertical.png);
 background-repeat: no-repeat, repeat;
 background-position: 2px 3px, 0, 0;
}
::-webkit-scrollbar {
 width: 12px;
 height: 12px;
}
::-webkit-scrollbar-track-piece:horizontal {
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F6F6F6), to(#CBCBCB), color-stop(0,#CBCBCB), color-stop(.08,#D2D2D2), color-stop(.15,#DBDBDB), color-stop(.23,#E2E2E2), color-stop(.3,#E9E9E9), color-stop(.38,#EFEFEF), color-stop(.45,#F4F4F4), color-stop(.53,#F8F8F8), color-stop(.6,#FBFBFB), color-stop(.68,#FCFCFC), color-stop(.76,#FDFDFD), color-stop(.85,#FAFAFA), color-stop(.93,#F6F6F6));
}
::-webkit-scrollbar-track-piece:vertical {
 background: -webkit-gradient(linear, 100% 0%, 0% 0%, from(#F6F6F6), to(#CBCBCB), color-stop(.93,#CBCBCB), color-stop(.85,#D2D2D2), color-stop(.76,#DBDBDB), color-stop(.68,#E2E2E2), color-stop(.6,#E9E9E9), color-stop(.53,#EFEFEF), color-stop(.45,#F4F4F4), color-stop(.38,#F8F8F8), color-stop(.3,#FBFBFB), color-stop(.23,#FCFCFC), color-stop(.15,#FDFDFD), color-stop(.08,#FAFAFA), color-stop(0,#F6F6F6));
}
::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:end:increment {
 height: 15px;
 display: block;
 background-color: #CCC;
}
::-webkit-scrollbar-thumb:vertical {
 background: -webkit-gradient(linear, 100% 0, 0 0, from(#2E4DBE), to(#5D5D5D), color-stop(0,#2E4DBE),color-stop(.08,#9CB5E4),color-stop(.15,#AFC6EA),color-stop(.23,#A8C0E9),color-stop(.3,#A2BEE9),color-stop(.38,#729CE4),color-stop(.45,#83AAED),color-stop(.53,#95BBFA),color-stop(.6,#A4C9FD),color-stop(.68,#B4D9FD),color-stop(.76,#BDE3FE),color-stop(.85,#B1D6FD),color-stop(.93,#5D5D5D));
 border: 1px solid #666;
 height: 50px;
 -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
 height: 50px;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2E4DBE), to(#5D5D5D), color-stop(0,#2E4DBE),color-stop(.08,#9CB5E4),color-stop(.15,#AFC6EA),color-stop(.23,#A8C0E9),color-stop(.3,#A2BEE9),color-stop(.38,#729CE4),color-stop(.45,#83AAED),color-stop(.53,#95BBFA),color-stop(.6,#A4C9FD),color-stop(.68,#B4D9FD),color-stop(.76,#BDE3FE),color-stop(.85,#B1D6FD),color-stop(.93,#5D5D5D));
 border: 1px solid #666;
 -webkit-border-radius: 6px;
}
::-webkit-scrollbar-corner {
 background: #EEE;
}

Here's the end result:

Not 100% perfect, but they're definitely closer to a native Mac OSX scrollbar. Might be an idea to prefix these css declarations with some kind of mac OSX identifier so Linux/Windows users don't get Mac specific scrollbars in the application.

Thanks to Vasken at Eye-Fi for helping me figure out some of the gradations and background images.

Some useful links:
http://webkit.org/blog/363/styling-scrollbars/
http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/
http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task