Styling Scrollbar for Google Chrome Browser

How to style chrome scrollbar to make it look and behave like firefox

As a solution, you can create your own custom scrollbar and use it to ensure the output is the same in all other browsers.

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #F2F2F2;
}

::-webkit-scrollbar-thumb {
  background: #BDBDBD;
}

::-webkit-scrollbar-thumb:hover {
  background: #6E6E6E;
}

<ul>
  <li>Finance</li>
  <li>Accounting</li>
  <li>Support</li>
  <li>Reports</li>
</ul>
  
<style>
  ul {
    overflow-y: auto;
    height: 50px;
    width: 150px;
  }
</style>

How to make thin scrollbar in chrome?

Try this:-

::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}

Style the scrollbar with css in Google Chrome (-webkit)

Here is an example that works:

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #000;
}

Or you can use jScrollPane.

Custom scrollbar in a Chrome App

I believe it's not visible until you describe how to show it with ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb

CSSTricks lists this as a minimal example:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Google Chrome Custom.css webkit-scrollbar no longer works

My chrome browser verion is 34.0.1847.116 m.
The following styles are still working in my chrome:

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: rgba(255,255,255, 0);
    -webkit-border-radius: 100px;
}
::-webkit-scrollbar:hover {
    width: 7px;
}

::-webkit-scrollbar-thumb {
    background: #FAE5F6;
    -webkit-border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active  {
    background: #fabae1;
}

Check once....If still doesn't work, try after upgrading your chrome...

Hope it helps :)

Webkit scrollbar CSS, always a white box in corner

While the answer provided by E.C.Pabon was technically correct, the real error was Chrome 50 on x64 Linux had a bug with GTK integration. As of Chrome 51, the issue has been fixed.

How to style in-page scrollbar without changing browser scrollbar?

Add the class .scroll before the -webkit code

.scroll::-webkit-scrollbar {
    width: 16px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

.scroll::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background: #ADADAD;
}

.scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}