Click here to Skip to main content
15,885,980 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
CSS
/* For the "inset" look only */
html {
    overflow: auto;
}
body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px; 
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}


What I have tried:

This Custom scrollbar not working properly in Firefox.
Posted
Updated 13-Jun-17 21:20pm

1 solution

There is no standard support for styling scrollbars in CSS - what you have here is WebKit (Chrome) specific and can not work on any other browser...
Firefox has open feature request on it - it turns 16 this year...
IE has it's own set of attributes to set...
Read here to see you options:
Custom scrollbars for IE, Chrome and Firefox using CSS - Code Mug[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900