5

I don't like the default scroll bar of Google Chrome:

enter image description here

Is there a way I could change its colors?

0

3 Answers 3

6

The good news is, if you use chrome, you can change almost everywhere.
Go to here, the plugin name is what we looking for Styleish:

https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe
Install it and after create a style like this:

Click for the S icon (styles) Manage styles

enter image description here

And now you can paste following code

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #840000;
  border: 1px solid #802113;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #f90000;
}
::-webkit-scrollbar-thumb:active {
  background: #ff2b2b;
}
::-webkit-scrollbar-track {
  background: #e80000;
  border: 0px none #ffffff;
  border-radius: 53px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

Of course if you dosen't like red backgound, you can edit backgorund section.
But, if you preferer a visual solution you can generarate your own scrollbar in here:
http://mikethedj4.github.io/Webkit-Scrollbar-Generator/
When you're done with edit, press save button, refresh the page and now you get pretty scrollbar almost everywhere.
Note:
You can add "!important" atribute for colors, thats means to css:
"Hey, this important so I don't care any other settings for this element"
Syntaxis:

background: #666666 !important;

Of course you can use simple color names, like black or red etc, but I think the color code is much prettier because you get the same color which you're whant.
If you choose this method, you can use this color mixer for example:
http://www.w3schools.com/tags/ref_colormixer.asp?colorbottom=000000&colortop=FFFFFF
And that's it, now you can work in clam, without any noing ugly scrollbar.
Note 2:
Yes it has some problem on some page, but I think the important atribute is can solve it.

0

I've recently been doing just that, restyling the scroll bar. Here, take a look at my source code in CSS, it works great, but there is either a "bug" or a feature lack thereof for getting the buttons to change when the scroll bar is at the top, or at the bottom like a normal one.

You can test out the code here.


The source code is below:

/* SCROLL BAR */
/* URLs to images
             resizer: http://i.imgur.com/hyb90YC.png
   down-arrow-active: http://i.imgur.com/paWZt7f.png
 down-arrow-disabled: http://i.imgur.com/hJVnFr4.png
  down-arrow-enabled: http://i.imgur.com/rGqTWWG.png
   left-arrow-active: http://i.imgur.com/BhwUFGl.png
 left-arrow-disabled: http://i.imgur.com/FocYdIW.png
  left-arrow-enabled: http://i.imgur.com/4wBXM2p.png
  right-arrow-active: http://i.imgur.com/q39FeM6.png
right-arrow-disabled: http://i.imgur.com/ZDzomkI.png
 right-arrow-enabled: http://i.imgur.com/WrfBmNE.png
     up-arrow-active: http://i.imgur.com/78jbDC2.png
   up-arrow-disabled: http://i.imgur.com/ng0Quya.png
    up-arrow-enabled: http://i.imgur.com/nCkVuVg.png
*/
::-webkit-scrollbar {background-color: black;}
/* arrow buttons */
::-webkit-scrollbar-button {background-color: #0d0d0d;background-repeat: no-repeat;background-position: center;}
::-webkit-scrollbar-button:active {background-color: #868686;}
::-webkit-scrollbar-button:hover:not(:active) {background-color: #2c2c2c;}
::-webkit-scrollbar-button:horizontal:increment {background-image: url(http://i.imgur.com/WrfBmNE.png);}
::-webkit-scrollbar-button:horizontal:increment:active {background-image: url(http://i.imgur.com/q39FeM6.png);}
::-webkit-scrollbar-button:horizontal:increment:disabled {background-image: url(http://i.imgur.com/ZDzomkI.png);}
::-webkit-scrollbar-button:horizontal:decrement {background-image: url(http://i.imgur.com/4wBXM2p.png);}
::-webkit-scrollbar-button:horizontal:decrement:active {background-image: url(http://i.imgur.com/BhwUFGl.png);}
::-webkit-scrollbar-button:horizontal:decrement:disabled {background-image: url(http://i.imgur.com/FocYdIW.png);}
::-webkit-scrollbar-button:vertical:increment {background-image: url(http://i.imgur.com/rGqTWWG.png);}
::-webkit-scrollbar-button:vertical:increment:active {background-image: url(http://i.imgur.com/paWZt7f.png);}
::-webkit-scrollbar-button:vertical:increment:disabled {background-image: url(http://i.imgur.com/hJVnFr4.png);}
::-webkit-scrollbar-button:vertical:decrement {background-image: url(http://i.imgur.com/nCkVuVg.png);}
::-webkit-scrollbar-button:vertical:decrement:active {background-image: url(http://i.imgur.com/78jbDC2.png);}
::-webkit-scrollbar-button:vertical:decrement:disabled {background-image: url(http://i.imgur.com/ng0Quya.png);}
/* foreground bar */
::-webkit-scrollbar-thumb {background-color: #3d3d3d;}
::-webkit-scrollbar-thumb:horizontal {border-top: 2px solid #0d0d0d;border-bottom: 2px solid #0d0d0d;}
::-webkit-scrollbar-thumb:vertical {border-left: 2px solid #0d0d0d;border-right: 2px solid #0d0d0d;}
::-webkit-scrollbar-thumb:hover {background-color: #565656;}
/* background bar */
::-webkit-scrollbar-track {background-color: #0d0d0d;}
/* corner, when there is converged scrollbars */
::-webkit-scrollbar-corner {background-color: #232323;}
::-webkit-resizer {border-top: 1px solid #262626; border-left: 1px solid #262626; background-image: url(http://i.imgur.com/hyb90YC.png);}
1
  • You do not explain what to do with the code. How does one use it? Nov 6, 2022 at 9:52
0

Here is a darker version of @Neo's proposal. Remember to use Stylus, as Stylish has some privacy concerns.

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
::-webkit-scrollbar-thumb {
    background: #3e3e3e;
    border: 0px solid transparent;
    border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3e3e3e;
}
::-webkit-scrollbar-track:hover {
    background: transparent;
}
::-webkit-scrollbar-thumb:active {
    background: transparent;
}
::-webkit-scrollbar-track:active {
    background: transparent;
}
::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none transparent;
    border-radius: 0px;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .