HTML5 - text input with padding is too wide

Kelu Thatsall picture Kelu Thatsall · Jan 7, 2014 · Viewed 8k times · Source

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:

enter image description here

But should be looking like this:

enter image description here

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

Answer

j08691 picture j08691 · Jan 7, 2014

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