HTML5 - text input with padding is too wide

Question

I want an input field which will be padded from inside. I'm transferring to HTML5. I have it working in HTML 4.01 Transitional, but in HTML5 the input field started to go out of table frame. Can you help me correct it for HTML?

Part of HTML Code

<td class="content_listing_r" style="width: 80%;">
    <input type="text" name="model_search" style="width: 100%; padding: 5px"  autocomplete="off" />
</td>

It looks like this:

But should be looking like this:

Here's a fiddle for you to check out and play with it: http://jsfiddle.net/kelu/DbXy5/5/

Answer 1

Add this CSS box-sizing rule to your input field:

.content_listing_r input {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

jsFiddle example

Answer 2

Add the padding to the class "content_listing_r" instead of the input area, this will add padding around the cell.

<td class="content_listing_r" style="width: 80%; padding: 5px;">
    <input type="text" name="model_search" style="width: 100%"  autocomplete="off" />
</td>

Alternatively, make the width smaller, and add padding as a percentage

<td class="content_listing_r" style="width: 80%;">
    <input type="text" name="model_search" style="width: 96%; padding: 2%"  autocomplete="off" />
</td>

Answer 3

You can use the handy calc rule for css width:

<input type="text" name="model_search" style="width: -webkit-calc(100% - 10px); width: calc(100% - 10px); padding: 5px" autocomplete="off" />

...though it may have compatibility issues in less-popular browsers

Answer 4

Use box-sizing: border-box

    <input type="text" name="model_search" style="width: 100%; padding: 5px; box-sizing:border-box"  autocomplete="off" />

with vendor prefixes

box-sizing:border-box;
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

box-sizing : border-box

Addition: ( If I may, (Royi))

-webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
     -moz-box-sizing: border-box; /* Firefox 1+ */
          box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */

Answer 5

If the input field is inside the thing, then you can use a width!

When you add padding it adds some little bit width and height depending on the parameters. You are using 100% width and adding some paddings. Which is the issue!

Try this:

width: 96%;

Lessen the width a bit of the input, it will give you with the element you want! :)

http://jsfiddle.net/afzaal_ahmad_zeeshan/DbXy5/8/

Answer 6

Try:

.content_listing_r input {
    box-sizing:border-box;
    -moz-box-sizing: border-box;
}

Answer 7

The padding adds extra width, if you change

padding:5px;

to

padding:5px 0;

it will fix your problem by removing the extra width while preserving top and bottom padding.