Question

I can’t figure out why the select element has a larger height than input[type="text"].

I thought that line-height controlled the height of inline elements like select and input, but it appears to work slightly different for the select element.

Example: http://jsfiddle.net/Dismissile/mnBsV/

I am setting the following style:

input[type="text"], select {
    padding: 2px;
    border: 1px solid #ccc;
    margin: 0;
    line-height: 16px;
    font-size: 14px;
}

I would think that the elements would behave as such:

16px + 4px + 2px (line-height + padding + border) = 22px

This is what it does for the input, but the select is doing:

18px + 4px + 2px

Where is it getting the 18px from? Why aren’t they consistent? Tested this in both IE8 and Chrome 15.

Answer 1

I couldn’t find any explicit references to how high the form elements should be but in http://www.w3.org/TR/css3-ui/#appendix D they do mention the default height of a select is

select[size] {
 appearance: list-menu;
 display: inline-block;
 height: attr(size,em);
}

It gets its height form the font size, whereas every other input has the same style attributes. So it is valid to have a select be a different height from all the other elements. However there is no standard that I could find to define them anyway (Note how the link says it is informative not normative).

So they are different sizes because nobody said they should be the same size.