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;
}
Related Topics
Transparent Strikethrought on Text
Jsf Panelgrid Alignment to Top
Compressing Fonts for Using in Web
How to Create a Pulsing Glow Ring Animation in CSS
Less-CSS -- How to Get a Parent's Parent
How to Make Element Fill Remaining Width, When Sibling Has Variable Width
Lesscss - Use Calculation and Return Value
Making Bxslider Full Screen (Filling Entire Browser Window)
What Does Navbar-Static-Top Do in Bootstrap 3
What Do Two Dots in a CSS Declaration Mean
Evenly Distribute Images Vertically Within Fixed-Height Space
How Does CSS Formatting in a Google Maps Bubble Work