Dismissile Dismissile - 1 year ago 59
CSS Question

Why does select have a slightly larger height than input[type=text]?

I can't figure out why the

element has a larger height than

I thought that
controlled the height of inline elements like
, but it appears to work slightly different for the

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 Source

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.