align text inside drop down to middle

Question

Here is my html

  <select id="ddlCountry" placeholder="optional" class="select" title="Select Country">
 <option value="0">country</option>
</select>

Here is the css

    .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;
}

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.

Here is the jsfiddle

Answer 1

Use top and bottom padding and remove height to align the text in the middle, like

.select{ padding: 4px; }

Your updated CSS would be

.select{
    width: 224px;
    border: none;
    font: normal 14px/16px "HelveticaNeueLTCom45Light" , Georgia,serif;
    display: block;
    float: none;
    margin-top: 9px;
    border:1px solid;
    color: #6d6e71;
    padding: 4px;
    background: url(../images/selectbg.png) no-repeat right 9px #fff;
    -webkit-appearance: none;
}