CODEWITHSUNDEEP
htmlcss
Behrang Saeedzadeh
Behrang Saeedzadeh

Reputation: 47913

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>

Upvotes: 11

Views: 4526

Answers (3)

funkeyCoder
funkeyCoder

Reputation: 11

you can add width in percentage in CSS like below

input { width: 100%;}

select {width: 94%;}

Upvotes: 0

Jim
Jim

Reputation: 1061

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

Upvotes: 14

Anthony
Anthony

Reputation: 12397

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

Upvotes: 1

Related Questions