css - Issue with Input & Select tag height in form

Question

I am making a form. When I give the same height and width to <input> and <select> tags, the <select> tag is not taking the same height as the <input>.

There seems to be one pixel difference in height.
What's the problem?

input {
  width: 100px;
  height: 20px;
  vertical-align: top;
}

select {
  border: 1px solid #ccc;
  vertical-align: top;
}

option {
  color: red;
  width: 100px;
  height: 20px;
  text-decoration: underline;
}

<input type="text">
<select>
  <option>first option</option>
  <option>second option</option>
</select>

question from:https://stackoverflow.com/questions/9767612/issue-with-input-select-tag-height-in-form

Answer 1

You have to give height to your select & give box-sizing property for this also.

select {
    border:1px solid #ccc;
    vertical-align:top;
    height:20px;
}
input, select{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Check this http://jsfiddle.net/RCnQa/16/

Works on IE8 & above.