Using Custom Scrollbars On Your Site
Content is free. When you buy through links on my site, I may earn affiliate commission. Learn More.
Change your default scrollbar to make your site look pretty. make sure this custom scrollbar will only be shown in google chrome browser, not in Mozilla Firefox, Opera, and internet explorer.
you just need to make simple changes to your CSS.
Paste the following code before </head> .
<style>
::-webkit-scrollbar {
background: #1d1d1d;
height: auto;
width: 12px;
}
::-webkit-scrollbar-button {
background: #141414;
}
::-webkit-scrollbar-button:hover {
background: #151515;
}
::-webkit-scrollbar-track {
background: #1d1d1d;
}
::-webkit-scrollbar-track-piece {
background: #1d1d1d;
}
::-webkit-scrollbar-thumb {
background: #141414;
border: 0;
}
::-webkit-scrollbar-thumb:hover {
background: #151515;
}
::-webkit-scrollbar-corner {
background: #1d1d1d;
}
::-webkit-resizer {
background: #141414;
}
</style>
You can change colour as per your choice. for that use Colorpicker Tool
Awesome! Worked beautifully. Tweaked the style to suit me(made it look like Google's new scrollbars), and here is what it ended up looking like: http://teenageminimalist.blogspot.com/
ReplyDeleteThanks!!