0

I created a website. I customized the main vertical scrollbar.

It works good on Google Chrome and Safari but not in Mozilla Firefox.

Do you have any idea to fix this problem ?

CSS CODE

::-webkit-scrollbar {                                   
    width: 10px;
    height: 6px;
    background: #FFF url(images/bg-blog-repeat.png) 0 0 repeat;
}


::-webkit-scrollbar-thumb {                             
    border: solid 0 transparent;
    border-right-width: 4px;
    -webkit-border-radius: 5px;
    -webkit-border-top-right-radius: 9px 5px;
    -webkit-border-bottom-right-radius: 9px 5px;
    -webkit-box-shadow: inset 0 0 0 1px rgb(79,79,79), inset 0 0 0 6px rgb(102,102,102);
}
::-webkit-scrollbar-thumb:hover {                       
    -webkit-box-shadow: inset 0 0 0 1px rgb(90,90,90), inset 0 0 0 6px rgb(110,110,110);
}
::-webkit-scrollbar-thumb:horizontal {                  
    border-right-width: 0;
    border-bottom-width: 2px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px 9px;
    -webkit-border-bottom-left-radius: 5px 9px;
}
::-webkit-scrollbar-corner {                            
    background: #FFF url(images/bg-blog-repeat.png) 0 0 no-repeat;
}

body ::-webkit-scrollbar {
    background: transparent none;
}

Thanks.

Hedra
  • 89
  • 1
  • 17
  • 4
    Well to start off it works in Chrome and Safari because you're explicitly styling for **webkit**, and Chrome/Safari use the webkit browser engine. Firefox is **mozilla**. – Roddy of the Frozen Peas Sep 13 '12 at 20:39
  • refer to - http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox – Keith Sep 13 '12 at 20:42

1 Answers1

-1

For every line that begins with -webkit-, write another exactly like it, replacing -webkit- with -moz-

Forty-Two
  • 7,535
  • 2
  • 37
  • 54