title: <select> tag want a vertical scroller on options
body: <p>Please visit this link first: <a href="http://jsfiddle.net/UWNtK/" rel="nofollow">http://jsfiddle.net/UWNtK/</a></p>
  
  <p>Here is a <code>&lt;select&gt;</code> tag with number of options. I have done it getting inspired by this tutorial here: <a href="http://bavotasan.com/2011/style-select-box-using-only-css/" rel="nofollow">http://bavotasan.com/2011/style-select-box-using-only-css/</a></p>
  
  <p>Now I need all the options to be wrapped under a div, so that there will be a vertical scroller (in case of category1).
  How this output can be obtained?</p>
  
  <p>I'm using this Html:</p>
  
  <pre><code>&lt;div class="drop1"&gt;
      &lt;select&gt;
          &lt;option value="categ1"&gt;Category1&lt;/option&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;option value="3"&gt;3&lt;/option&gt;
          &lt;option value="4"&gt;4&lt;/option&gt;
          &lt;option value="5"&gt;5&lt;/option&gt;
          &lt;option value="6"&gt;6&lt;/option&gt;
          &lt;option value="7"&gt;7&lt;/option&gt;
          &lt;option value="8"&gt;8&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="drop2"&gt;
      &lt;select&gt;
          &lt;option value="categ2"&gt;Category2&lt;/option&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;option value="3"&gt;3&lt;/option&gt;
          &lt;option value="4"&gt;4&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.drop1, .drop2 {
      float: left;
      width: 180px;
      height: 34px;
      overflow: hidden;
      background: url(images/dropdwn.png) no-repeat right #ccc;
      border-radius: 4px;
      border:1px solid #000;
      box-shadow: 0 1px 3px #f00;
      font-size:14px;
      margin:0 10px;
  }
  .drop1 select, .drop2 select {
      background: transparent;
      width: 215px;
      padding: 5px;
      font-size: 14px;
      border: 0;
      border-radius: 0;
      height: 34px;
      -webkit-appearance: none;
      color: #f00;
      cursor: pointer;
  }
  .drop1 option, .drop2 option {
      text-align: center;
      margin: 0 auto;
      color: #000;
      cursor: pointer;
  }
  </code></pre>
  
  <p>Thanks.</p>