How can I control a dropdown's visible text's position?

I have a dropdown that I'm looking to enlarge without effecting the text and ensuring the right hand down arrow remains at the full hieght of the element.

I've tried adding padding but this effects the right side:

Dropdown with padding http://h开发者_高级运维octordesign.com/dropdown2.png

I've tired adding height but I can't vertically align the text:

Dropdown with height http://hoctordesign.com/dropdown.png

Anyone solved this before?

Thanks, Denis

This is browser-dependent behaviour. Each browser applies css to form controls differently.

The best breakdown of what you can do (that I've come across) is at http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/. And the most relevant section is http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/

In your case it would be better to use a custom element that acts like a select box.

Here is a nice one using jQuery

Select Box replacement