How to standardize the height of a select box between Chrome and Firefox? [closed]

I've run into this problem before

Setting the height of the select element works fine on webkit in Windows, but fails on webkit on a Mac.

If you set the css attribute

-webkit-appearance: menulist-button;

It will allow the height to work properly on a Mac, but it creates this weird black border on windows. You can adjust the border by setting the css border property, but that changes the look on all browsers that let you style select borders, not just webkit.

At this point, i gave up, but hopefully that is a good starting point if you want to investigate further.

Increase the line-height.    

height will not work on Safari unless you also have a background set. If you set a background you may lose the drop down arrows in the windows version of Safari. Again form styling seems to be wrought with issues.

use css border property. make the select border to none or 0. border:none; showing perfectly in chrome and safari in mac os