CODEWITHSUNDEEP
htmlcss
Denis Hoctor
Denis Hoctor

Reputation: 2607

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://hoctordesign.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

Upvotes: 2

Views: 165

Answers (2)

rahul
rahul

Reputation: 187030

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

Upvotes: 0

Jonathan Fingland
Jonathan Fingland

Reputation: 57167

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/

Upvotes: 2

Related Questions