How to center text in a select list

Question

I'm having trouble styling a select list in an html form. Basically I want it to have a font size of 12px, and a height of 30px; The problem is that the box is drawn to the right hight, but the text rendering varies in each browser. In FireFox it renders it in the top left corner. I want to vertically center the text. Anyone know of a way to do this or do I need to make something custom out of a ul?

Thanks

Answer 1

You cannot reliably customize <select> elements using CSS in all browsers.

You need to make a custom list control.

Answer 2

Good luck with this, text-align works only with block elements. The select list is formatted by browsers differently, as it is with most of the form field elements (like the file input type). Wish for better days. The workarounds that I have seen for this are really ugly.

Answer 3

The only way is to drop the <select> and use an <input type="text"< and a <div> to give you the exact feel of a select list but with the ability to do everything as it will be a <li> that you have at the end.

I use this approach not to show aligned text but to use a small icon per each line. This also gives me the ability to show exactly how I want no mater what browser is used as well.

like the image below