Input elements are defined mostly by the default style sheet used by web browsers. These styles can be reset in our CSS, but to get consistent results across browsers we need to know that the input's height is not only set by explicitly defining a height on such elements, but also (and above all) by the current font size and family set on a given element.
For example, if you use the following rule, you will get inconsistent results with the height of the input:
input {
width: 100px;
height: 12px;
border: 1px solid #666;
}
Instead, use the font size and family to make your input element as tall as text:
input {
width: 100px;
font: 12px Arial, sans-serif;
border: 1px solid #666;
}
To get more resilient results, you can use ems:
body {font-size: 76%;} /* 1em = 12px */
input {
width: 100px;
font: 1em Arial, sans-serif;
border: 1px solid #666;
}
Finally, I always use this default reset rule to also vertically align inputs with text:
input {
font: 1em Arial, sans-serif;
vertical-align: middle;
}
The above rule applies to the select element as well.