title: CSS3 - How to "restore" ::-webkit-scrollbar property to the default scroll bar
body: <p>Hi I'm using the next css code to style scroll bars in Safari and Chrome. And works really great but I´m facing the next issue, I would like te restore the default value, when I view the site on my ipad. I'm using @media css for achived this but, I don't know how to restore the defaults values.</p>
  
  <pre><code>@media screen and (min-width: 768px) and (max-width: 1024px) {  }
  
  
  
  /*Scroll bar nav*/
  ::-webkit-scrollbar {
      width: 12px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
      -webkit-border-radius: 10px;
      border-radius: 10px;
      background:#FFF;    
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
      -webkit-border-radius: 10px;
      border-radius: 10px;
      background: rgba(204,204,204,0.8); 
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  }
  ::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(204,204,204,0.4); 
  }
  </code></pre>