title: How come that the scrollbar changes when im on Chrome and not on Firefox
body: <p>So I am playing around with scrollbars and im trying to recreate these (link below), and I just realized that they do only change colors if I am on Chrome but not if I am on Firefox, what causes this and how do I properly deal with this?
  I tried looking at other examples aswell but it seems that no matter what example I look at, all of them have no effect on Firefox</p>
  
  <p><a href="https://codepen.io/akinjide/pen/BpggrZ" rel="nofollow noreferrer">https://codepen.io/akinjide/pen/BpggrZ</a></p>
  
  <p>HTML</p>
  
  <pre><code>- var n = 1
  
  h1 Customize the Browser's Scrollbar with CSS
  
  #wrapper
    .scrollbar#style-default
      .force-overflow
  
  while n &lt; 12
    .scrollbar(id="style-" + n++)
      .force-overflow
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.scrollbar {
      margin-left: 22px;
      float: left;
      height: 300px;
      width: 65px;
      background: #F5F5F5;
      overflow-y: scroll;
      margin-bottom: 25px;
  }
  
  .force-overflow {
      min-height: 450px;
  }
  
  #wrapper {
      text-align: center;
      margin: auto;
  }
  
  #style-1::-webkit-scrollbar,
  #style-2::-webkit-scrollbar {
      width: 12px;
      background-color: #F5F5F5;
  }
  
  #style-4::-webkit-scrollbar,
  #style-5::-webkit-scrollbar,
  #style-6::-webkit-scrollbar,
  #style-7::-webkit-scrollbar,
  #style-8::-webkit-scrollbar,
  #style-9::-webkit-scrollbar,
  #style-10::-webkit-scrollbar,
  #style-11::-webkit-scrollbar {
      width: 10px;
      background-color: #F5F5F5;
  }
  
  /**  STYLE 1 */
  #style-1::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      background-color: #555;
  }
  
  #style-1::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      border-radius: 10px;
      background-color: #F5F5F5;
  }
  
  /**  STYLE 2 */
  #style-2::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      background-color: #D62929;
  }
  
  #style-2::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      border-radius: 10px;
      background-color: #F5F5F5;
  }
  
  /**  STYLE 3 */
  #style-3::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
  }
  
  #style-3::-webkit-scrollbar {
      width: 6px;
      background-color: #F5F5F5;
  }
  
  #style-3::-webkit-scrollbar-thumb {
      background-color: #000000;
  }
  
  /**  STYLE 4 */
  #style-4::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
  }
  
  #style-4::-webkit-scrollbar-thumb {
      background-color: #000000;
      border: 2px solid #555555;
  }
  
  /**  STYLE 5 */
  #style-5::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
  }
  
  #style-5::-webkit-scrollbar-thumb {
      background-color: #0ae;
      background-image: -webkit-gradient(linear, 0 0, 0 100%,
                        color-stop(.5, rgba(255, 255, 255, .2)),
                                color-stop(.5, transparent), to(transparent));
  }
  
  /**  STYLE 6 */
  #style-6::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
  }
  
  #style-6::-webkit-scrollbar-thumb {
      background-color: #F90; 
      background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,
                                                transparent 25%,
                                                transparent 50%,
                                                rgba(255, 255, 255, .2) 50%,
                                                rgba(255, 255, 255, .2) 75%,
                                                transparent 75%,
                                                transparent)
  }
  
  /** STYLE 7 */
  #style-7::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
      border-radius: 10px;
  }
  
  #style-7::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-image: -webkit-gradient(linear,
                                         left bottom,
                                         left top,
                                         color-stop(0.44, rgb(122,153,217)),
                                         color-stop(0.72, rgb(73,125,189)),
                                         color-stop(0.86, rgb(28,58,148)));
  }
  
  /**  STYLE 8 */
  #style-8::-webkit-scrollbar-track {
      border: 1px solid black;
      background-color: #F5F5F5;
  }
  
  #style-8::-webkit-scrollbar-thumb {
      background-color: #000000;  
  }
  
  /**  STYLE 9 */
  #style-9::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
  }
  
  #style-9::-webkit-scrollbar-thumb {
      background-color: #F90; 
      background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%,
                                                transparent 25%,
                                                transparent 50%,
                                                rgba(255, 255, 255, .2) 50%,
                                                rgba(255, 255, 255, .2) 75%,
                                                transparent 75%,
                                                transparent)
  }
  
  /**  STYLE 10 */
  #style-10::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(left, #96A6BF, #63738C);
    box-shadow: inset 0 0 1px 1px #5C6670;
  }
  
  #style-10::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #eee;
    box-shadow: 0 0 1px 1px #bbb, inset 0 0 7px rgba(0,0,0,0.3)
  }
  
  #style-10::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(left, #8391A6, #536175);
  }
  
  /**  STYLE 11 */
  #style-11::-webkit-scrollbar-track {
    border-radius: 10px;
    background: rgba(0,0,0,0.1);
    border: 1px solid #ccc;
  }
  
  #style-11::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(left, #fff, #e4e4e4);
    border: 1px solid #aaa;
  }
  
  #style-11::-webkit-scrollbar-thumb:hover {
    background: #fff;
  }
  
  #style-11::-webkit-scrollbar-thumb:active {
    background: linear-gradient(left, #22ADD4, #1E98BA);
  }
  </code></pre>