Scroll bar css in Mozilla

Question

I am trying to design the scroll bar, for that I have given like

::-webkit-scrollbar {
  width: 8px; 
   background-color: rgba(0,0,0,0);
  -webkit-border-radius: 100px;
}
::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

::-webkit-scrollbar-thumb:vertical {
  background: rgba(0,0,0,0.61);
  -webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
  background: rgba(0,0,0,0.61); /* Some darker color when you click it */
  -webkit-border-radius: 100px;
}

This is working fine with Chrome and Safari, I want the same css apply to Firefox; how can I get that?

possible duplicate of this http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox — Tun Zarni Kyaw, Jan 09 '14 at 10:25

Krish R · Answer 1 · 2014-01-09T10:17:21.843

2

Using CSS to alter the appearance of the scrollbars is not supported. It alters the appearance of the browser UI elements and for that reason its doubtful it will ever be supported.

You may hide the scrolbar in mozila,

CSS:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

 scrollbar{
  -moz-appearance: none !important;
 }

edited Jan 09 '14 at 10:17

answered Jan 09 '14 at 10:11

Krish R

22,583
7
50
59

score 0 · Answer 2 · edited Aug 02 '14 at 12:26

0

The article in the Mozilla support forum discussed about "How to hide or disable vertical and horizontal scrollbars?" You can try this link to mozilla support

http://support.mozilla.org/en-US/questions/957337

edited Aug 02 '14 at 12:26

patrick

11,519
8
71
80

answered Jan 09 '14 at 11:30

Mahib

3,977
5
53
62

Scroll bar css in Mozilla

2 Answers2