HTML5 - text input with padding is too wide

css, html, html4

Solution

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

Problem

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/

Original source