Dismissile Dismissile - 1 year ago 74
CSS Question

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

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 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download