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

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