Style Scrollbar CSS Only

Glenn Blog Leave a Comment

Here’s the CSS for styling a scrollbar:-


/* Scroll */
  ::-webkit-scrollbar {
    width: 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.

NB This only works in Webkit browsers.

About the Author
Style Scrollbar 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.