Custom.css
file.
You can find it at the following location:
Windows:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
Mac:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
Ubuntu:
~/.config/chromium/Default/User\ StyleSheets/Custom.css
Once located, open it in a text editor and add the following code:
::-webkit-scrollbar-track-piece{ background-color:#fff; -webkit-border-radius:0; } ::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-thumb{ height:50px; background-color:#999; -webkit-border-radius:4px; outline:2px solid #fff; outline-offset:-2px; border: 2px solid #fff; } ::-webkit-scrollbar-thumb:hover{ height:50px; background-color:#9f9f9f; -webkit-border-radius:4px; }
Save the file and reload your tabs to see the change.
As you can see it’s basic CSS so, if you wish, you can easily modify the code to your liking. For example, if you find the scroll bar too thin change its width by editing this part:
::-webkit-scrollbar{ width:16px; }
You should be able to see this styled scroll bar on all pages, including scroll bars within a page.
Manually customizing your browser by editing style sheet, instead of installing extensions, eradicates the risk of someone tracking your browsing history and it is also less intensive on system resources.
If you’d like to further customize Chrome, check out this post on styling the Web Inspector.