Click here to Skip to main content
15,867,860 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
iam trying to change scrollbar style. i have written css code, it is working in chrome but not working in Mozilla.

How can i solve this issue?

What I have tried:

<pre>::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

::-webkit-scrollbar{
	width: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb{
	background-color: #0d9b6e;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}
Posted
Updated 8-Jun-17 6:33am

1 solution

Firefox doesn't support custom scrollbar colours. There's a request to add this that's been open for 16 years, with no sign of a resolution:
77790 - (scrollbar-colors) Style the scrollbar (binding ::-moz-horizontal-scrollbar to XBL)[^]

If you really need to style the scrollbars, then you're going to need a solution which hides them and replaces them with custom elements. For example: jScrollPane - cross browser styleable scrollbars with jQuery and CSS[^]

NB: Your styles also won't work in IE or Edge. In IE, you can modify the colour using a different syntax (scrollbar-face-color). Edge does not support either the IE or Chrome options, so once again, you'll need a custom solution like jScrollPane.

Can I use... CSS scrollbar styling[^]
 
Share this answer
 
Comments
Afzaal Ahmad Zeeshan 8-Jun-17 12:54pm    
5ed.

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