Style Scrollbar with CSS Only

Here’s the CSS for styling the browser scrollbar:-


/* Scroll */
  ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
  background: #c4c6c8;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
  background: #174859;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb:horizontal:hover,
::-webkit-scrollbar-thumb:vertical:hover { 
  background: #09c694;
  } 

You can see the CSS applied above on the scrollbar on our site and here you see the Scroll Bar Track in grey, the Thumb slider in Dark Blue and then in Green on hover. You can modify the Scrollbar CSS to suit your own website color theme.

NB Works for Webkit browsers and applies to all visible Scrollbars.

About the Author
Style Scrollbar with CSS Only 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.