css - Drop down list styling, can't get the padding right

Question

What seemed like an easy task has become hours of puzzling by now. I have a dropdownlist (@html.dropdownlistfor(model)), which I style via css ( new { @class = "searchDropDownList" } )

The thing is, the standard dropdown list is too short (height-wise), but when I add height to make the box bigger, the selected item is not centered anymore. vertical-align: middle doesnt work on the selected item.

When I add padding to the top of the box, the text goes down as I want, but when you would then hover the textbox, you can see the Selection Arrow being croocked, since that ones also goes down.

See pictures:

• Firefox:

• Chrome:

Does anyone know how to lower only the text?

EDIT: Current css:

.searchDropDownList {
  display: inline;   
  width: 114px;
  height: 26px;
  float: left;
  font-size: 14px;
  margin: 4px auto auto 2px;
  text-align: left;
  vertical-align: middle;      
  padding-left: 2px;
  padding-top: auto;
  line-height: 10px; 
}

Changing the padding-top: auto; to 3px results in the images posted above.