title: Styling Select Drop down box
body: <p>I have a HTML Select drop down box, which I have styled, the problem I am having is that I can not seem to style the background color of the options.    Below is a link to a demo as you can see the drop down options has a white background, which i am trying to change.</p>
  
  <p><a href="http://cssdeck.com/labs/lnroxrua" rel="nofollow">http://cssdeck.com/labs/lnroxrua</a></p>
  
  <p>Here is my HTML Code:</p>
  
  <pre><code>&lt;div class="select-div"&gt;
      &lt;select name="pagination"&gt;
  
        &lt;option value="10" selected="selected"&gt;10&lt;/option&gt;
        &lt;option value="20"&gt;20&lt;/option&gt;
        &lt;option value="30"&gt;30&lt;/option&gt;
        &lt;option value="40"&gt;40&lt;/option&gt;
        &lt;option value="50"&gt;50&lt;/option&gt;
      &lt;/select&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS Styling</p>
  
  <pre><code>  select{
      background:transparent;
      width: 170px;
      padding: 2px;
      font-family:Arial, Helvetica, sans-serif;
      font-size:11px;
      font-weight:600;
      color:#fff;
      line-height: 1;
      border: 0;
      border-radius: 0;
      height: 22px;
      -webkit-appearance: none;
  
      }
  
      .select-div{
  width: 170px;
  height: 22px;
  overflow: hidden;
  background: url(arrowhead.png) no-repeat right #363636;
  border-top:#575757 1px solid;
  -webkit-border-radius: 4px 4px 4px 4px;
   -moz-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
  -webkit-box-shadow: inset 0 2px 4px rgba(107, 105, 105, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
   -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow:    0px 8px 3px -9px #000000;
        -webkit-box-shadow: 0px 8px 3px -9px #000000;
        box-shadow:         0px 8px 3px -9px #000000;
     }
  </code></pre>
  
  <p>Thanks</p>