css inconsistency with firefox - select form fields

Question

I have a form with input and select fields all at height:32px.
Firefox aligns the text to the top while all the other browsers align center.

I would like to align the text to center, but seem to be having problems.
Any suggestions please? HERES MY FIDDLE

enter image description here

<select id="month" class="" name="month">
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option selected="" value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
    <option value="12">undefined</option>
</select>
<input type="text" value='some text' />

update: line-height didnt seem to do anything

#month, input {height:32px; line-height:32px; vertical-align:middle;}
#month select{line-height:32px;}

Have u tried the line-height property of select? Make it same as height — xfx, Oct 27 '12 at 03:03
@xfx thank you! can you put that as an answer and i will use it — t q, Oct 27 '12 at 03:18

score 2 · Answer 1 · edited May 23 '17 at 12:21

Actually if you give height for select box and observe the text align in various browsers is is different implementation firfox -- text align from top left IE- text align in the bottom chrome -align in the center

One solution is to give the padding to the select box it also a minimal solution, because if you top padding to fix for the firfox then in IE the padding adds to the top and the text align to further bottom. Another problem is as much the padding you give that padding will applicable to the select dropdown button also. best solution is please avoid the height for select box and keep the default height for the box. For further reference please visit the link. this may clarify I want to vertical-align text in select box

score 0 · Accepted Answer · answered Oct 27 '12 at 03:23

0

my solution is use padding, and some css hack

#month{padding: 6px 0;}

I tried it in jsfiddle, it works

answered Oct 27 '12 at 03:23

xfx

1,918
1
19
25

css inconsistency with firefox - select form fields

2 Answers2