title: Customized Scrollbar doesn't work for Firefox
body: <p>I created a website. I customized the main vertical scrollbar.</p>
  
  <p>It works good on Google Chrome and Safari but not in Mozilla Firefox.</p>
  
  <p>Do you have any idea to fix this problem ?</p>
  
  <p>CSS CODE</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>Thanks.</p>