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