title: Increase Scroll-bar width in Firefox - html / css
body: <p>I saw some questions about this, but those questions don't gave a solution that could work for me.</p>
  
  <p>I want to increase the <strong>Scrollbar width</strong> of a div. The div size is huge, so a horizontal scrollbar has appeared. Now I want to increase the width of that scrollbar for more flexibility.
  So I search and found following link with code that works on Chrome browser.
  <a href="http://jsfiddle.net/2aHeE/" rel="nofollow"><strong>JSFiddle</strong></a></p>
  
  <pre><code>::-webkit-scrollbar {
      width: 2em;
      height: 2em
  }
  ::-webkit-scrollbar-button {
      background: #ccc
  }
  </code></pre>
  
  <p>But this doesn't work on Firefox. I tried to replace the <strong>webkit</strong> with <strong>moz</strong> , didn't work either.</p>
  
  <p>I also found that writting following code in userContent.css file of firefox can increase scrollbar width, but 1) I didn't find that <strong>userContent.css</strong> file in windows 7. 2) I can't go to users' home to tell them how to increase scrollbar width manually :P That's not a solution.</p>
  
  <pre><code>/* Increase width of VERTICAL SCROLLBAR */
  scrollbar[orient="vertical"], scrollbar[orient="vertical"] thumb, scrollbar[orient="vertical"] scrollbarbutton { min-width: 35px !important; -moz-appearance: none !important; }
  
  /* Increase width of HORIZONTAL SCROLLBAR */
  scrollbar[orient="horizontal"], scrollbar[orient="horizontal"] thumb, scrollbar[orient="horizontal"] scrollbarbutton { min-height: 35px !important; -moz-appearance: none !important; }
  </code></pre>
  
  <p>Is there any way so that I can increase scrollbar width in both Chrome &amp; Firefox?? (Forget IE) I can use <strong>html css javascript &amp; jquery</strong> solutions, <strong>but no scrollbar plugin</strong>. I've to convert the native scrollbar from browsers.</p>