title: align text inside drop down to middle
body: <p>Here is my html</p>
  
  <pre><code>  &lt;select id="ddlCountry" placeholder="optional" class="select" title="Select Country"&gt;
   &lt;option value="0"&gt;country&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Here is the css</p>
  
  <pre><code>    .select
  {
      width: 224px;
      border: none;
      font: normal 14px/16px "HelveticaNeueLTCom45Light" , Georgia,serif;
      display: block;
      float: none;
      height: 32px;
      margin-top: 9px;
      border:1px solid;
      color: #6d6e71;
      padding: 0px 4px 0px 4px;
      background: url(../images/selectbg.png) no-repeat right 9px #fff;
      -webkit-appearance: none;
  }
  </code></pre>
  
  <p>The issue is the text inside the drop down is aligned to top in Mozilla but looks perfect and aligned to middle in other browsers.
  Any way to align text to middle of drop down in all browsers.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/LEBRm/" rel="nofollow">jsfiddle</a></p>