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

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>

Answers


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


This just seems to be the problem with browsers rendering form elements differently. Try fully defining their styles, like border width etc.


Need Your Help

How to import local image using knitr for markdown

html image markdown figure knitr

I have an externally created png image in a local directory that I'd like to import to a report using knitr. The ultimate target filetype is html. I have no trouble getting my own figures to appear...

Grab only Dates from timestamp, automatically format once the new data is populated from a google form

google-sheets google-form

I want to grab only the dates from timestamps. Now I have this formula =ArrayFormula(if(len(A2:A),int(A2:A),IFERROR(1/0)))