Codesnipp.it Social Code Sharing

Andrew Wayne

CSS3 Custom Scrollbars

by Andrew Wayne on May 04, 2011

/* Just some basics for styling webkit scrollbars */ /* This is the entire scrollbar unit. */ ::-webkit-scrollbar { background: #FFF; width: 15px; height: 6px; } /* This is the little button at the start and end of the scrollbar. */ ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { background-color: transparent; display: block; height: 40px; } /* This is the background which the scrollbar moves in. */ ::-webkit-scrollbar-track { background: #FFF; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; } /* This will style the scrollbar thumb */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; background: rgba(255,248,69,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); } /* This will style the scrollbar thumb when the window is inactive */ ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

Can't see the comments? Please login first :)