title: CSS select box good on Chrome bad in Firefox
body: <p>i'm just trying styling the select box both for webkit and moz browsers , on webkit it looks great but in Firefox it looks so bad, the default option is not vertical aligned with the select box.</p>
  
  <p>Can you help me out finding whats wrong with this code please:</p>
  
  <p>CSS:</p>
  
  <pre><code>select{
      min-width: 100%;
      width:inherit;
      background: #fff;
      height: 33px;
      border-radius:5px;
      font-size: 15px;
      border:none;
      box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
  }select option,select option:hover{
      padding:5px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;select&gt;
      &lt;option&gt;hey&lt;/option&gt;
      &lt;option&gt;hey2&lt;/option&gt;
      &lt;option&gt;hey3&lt;/option&gt;
  
  &lt;/select&gt;
  </code></pre>
  
  <p>Here a fiddle so you can see how it looks on Firefox and then in Chrome :/ unbelievable!!</p>
  
  <p><a href="http://jsfiddle.net/wL8Rs/" rel="nofollow noreferrer">http://jsfiddle.net/wL8Rs/</a></p>
  
  <p>I'm using Chrome latest 34.0 version and Firefox latest 29.0 version</p>