Why is the selection a little higher than the input [type = text]?

Question

I cannot understand why the select element has a greater height than input[type="text"] .

I thought line-height controls the height of inline elements like select and input , but it seems to be a little different than the select element.

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

I set 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 input, but it makes a choice:

18px + 4px + 2px

Where does he get 18px? Why are they not consistent? This is tested in both IE8 and Chrome 15.

Answer 1

I could not find explicit references to how tall the form elements are, but in http://www.w3.org/TR/css3- ui / # app D they mention the default height for selection

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

It gets its height from the font size, while every other input has the same style attributes. Thus, it makes sense to choose 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 because no one said that they should be the same size.

Answer 2

I managed to get your code to work.

The trick is this:

• Set display to block to use the height property.
• Set the box-sizing property to content-box . This will allow you to set the SELECT content area to height, but keep in mind that margin , border and padding values ​​will not be calculated by the SELECT width / height, so adjust these values ​​accordingly.

Example

 select { display: block; padding: 6px 4px; -moz-box-sizing: content-box; -webkit-box-sizing:content-box; box-sizing:content-box; height: 15px; } 

See updated jsFiddle .

Answer 3

outset border elements have an implicit button with outset border , the solution uses height and box-sizing: border-box .