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>

View on JSFiddle

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.

Answer 2

try using box-sizing:

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

example fiddle: http://jsfiddle.net/RCnQa/17/