Why the input and the select do not get the same width?

Question

I have a table with two rows. The first row contains an input and the second row contains a select. Even though I have set their widths to be 100%, the select box is a few pixels smaller than the input. Any ideas why is this so and how can I set their widths to be equal to each other and as big as possible (e.g. %100) in a way that works across all (A-grade) browsers?

<table width="100%" style="margin-top: 5px;">
<tr>
    <td width="35"><label for="desc">Description</label></td>
    <td>
        <input type="text" style="width: 100%;" name="desc" id="desc" />
    </td>
</tr>
<tr>
    <td width="35"><label for="group">Group</label></td>
    <td>
        <select id="group" name="group" style="width: 100%; line-height: 17px;">            
            <option value="val">name</option>            
        </select>
    </td>
</tr>
</table>

Answer 1

This is because with an <input>, the border and padding is added on to the width (like with most other elements). With a <select>, the border and padding is included in the width, just like in the old IE quirks mode.

You can get round this by increasing the width to take account of this, if you know the width in pixels:

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

Or (if you can rely on browser support) you can use the new CSS3 box-sizing property to make them behave consistently, and draw padding and border outside of the element width:

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

Alternatively, you can set box-sizing to border-box to make the inputs behave like the selects, with padding drawn inside the width of the box.

Tested in Chrome, IE8, FF