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

Question

I have the following css in Firefox:

The same page looks like this in chrome:

Is there any way to style chrome scrollbar to make it look like firefox?

I'm just using overflow-y: auto and a fixed heigth.

I created a the following codepen to test it

 ul { overflow-y: auto; height: 50px; width: 150px; }

 <ul> <li>Finance</li> <li>Accounting</li> <li>Support</li> <li>Reports</li> </ul>

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

Answer 1

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>

From the W3schools :

Note: Custom scrollbars are not supported in Firefox or in Edge, prior to version 79.