I want to vertical-align text in select box

Question

I want to vertically align the text in select box. I tried using

select{
   verticle-align:middle;
}

however it does not work in any brows

Answer 1

I ran into this problem exactly. My select options were vertically centered in webkit, but ff defaulted them to the top. After looking around I didn't really want to create a work around that was messy and ultimately didn't solve my problem.

Solution: Javascript.

if ($.browser.mozilla) {
            $('.styledSelect select').css( "padding-top","8px" );
        }

This solves your problem very precisely. The only downside here is that I'm using jQuery, and if you aren't using jQuery on your project already, you may not want to include a js library for a one-off.

Note: I don't recommend styling anything with js unless absolutely necessary. CSS should always be the primary solution for styling–think of jQuery (in this particular example) as the axe labeled "Break in case of Emergency".

*UPDATE* This is an old post and since it appears people are still referencing this solution I should state (as mentioned in the comments) that since 1.9 this feature has been removed from jQuery. Please see the Modernizr project to perform feature detection in lieu of browser sniffing.