By default selects have smaller heights compared to inputs (text fields). Is there a best-practice way to set the height of selects and inputs with the same font-size equal to each other?
+1
A:
That is good question because it is related to our everyday css writing practice. I would to recommend setting same class for elements that you want to have similar fonts.
As far as height of select box is concerned then if you use height:Xpx css property then it would put padding of about X pixels from bottom therefore your select box would look very odd. So for setting height of select box you should use padding: css property and put equal padding for top and bottom only for e.g padding:3px 0px will put padding of 3px from top and bottom and setting text of select box right in the middle. That would look much better on mac but on windows pc drop down button at far right will look odd because it will not resize for padding property.
Best solution is to combine both tricks i.e set height of select box and put padding from top until it is aligned in the middle.
Another way which is used in most of the advanced sites is using ul for making custom select box and put custom styles. Here is the tutorial http://gerrendesign.com/weblog/2009/06/how_to_make_custom_select_boxe.php
Ayaz Alavi
2010-06-11 06:45:34