Css Tags For Mozilla Browser to style scrollbar

[royalsam]

Below these are for the all other browsers expect mozilla. which tags i can use for mozilla??

::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px #fff);
background:#000;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px #fff;
background:#CCC;
}*

[Paulie_D]

Just change use -moz instead of -webkit as we have showed you in the previous posts.

Just note that they may not be **exactly** the same

https://css-tricks.com/almanac/properties/a/appearance/

[Eric Gregoire]

Not sure if shadows and stuff are supported by Firefox scroll bars; I could be wrong.

If you’re looking for cross-browser consistency in appearance, you might want to consider a fallback using JS for any browser engine that doesn’t support what you’re doing. jScrollPane is one option :: http://jscrollpane.kelvinluck.com/

[Paulie_D]

Also note that, I think, you have to state the -moz versions **separately** from the -webkit ones in your CSS.

I’m note sure you can comma separate them.

[royalsam]

@Paulie_D

I Have Done this for mozilla Browser but its not working..Get Me the solution Sir..

::-moz-scrollbar {
width: 12px;
}
::-moz-scrollbar-track {
-moz-box-shadow: inset 0 0 6px #fff);
background:#000;
}
::-moz-scrollbar-thumb {
border-radius: 10px;
-moz-box-shadow: inset 0 0 6px #fff;
background:#7A252B;
}*

[Paulie_D]

Do you have a link you could share or perhaps a Codepen?

[ratneshn]

@paulie_D

here is the link below I tried in code pen its not working

http://codepen.io/ratneshn/pen/Mydvdx

[Paulie_D]

Seems Mozilla don’t support custom scrollbars as yet.

[ratneshn]

ohh do we have any other solution for this.

[Paulie_D]

Nope….although there may be javascript alternatives.

[AmerllicA]

There is not any CSS way to do this. for cross-browser user some JS tricks instead.

[fabioyehudi]

I made a registration here, just to answer this topic:

/* Only Chrome */
.container::-webkit-scrollbar {width: 17px;}
.container::-webkit-scrollbar-thumb {background-color: green; background-clip: padding-box; border: 1px solid red;}
.container::-webkit-scrollbar-track {background-color: red; }
::-webkit-scrollbar-button {background-color: red;}
/* Only IE */
.container {scrollbar-face-color: green; scrollbar-shadow-color: red; scrollbar-highlight-color: red;}
/* Only FireFox */
.container {scrollbar-color: green red;}
/* View Scrollbar */
.container {overflow-y: scroll;overflow-x: hidden;}


...

I hope this helps. See you later!

[cssblogger]

Did you try another browser?

[Author]

Posts