Padding within inputs breaks width 100%

Question

Ok, so we know that setting padding to an object causes its width to change even if it is set explicitly. While one can argue the logic behind this, it causes some problems with some elements.

For most cases, you just add a child element and add padding to that one instead of the one set to 100%, but for form inputs, that's not a possible step.

Take a look at this: http://sandman.net/test/formcss.html

The second input has its padding set to 5px which I very much prefer to the default setting. But unfortunately that makes the input grow 10px in all directions, including adding 10px to the 100% width.

Problem here is that I can't add a child element inside the input so I can't fix it. So the question is:

Is there any way to add padding inside the input while still keeping the width 100%? It need to be 100% since the forms will render in different width parents so I don't know beforehand the width of the parent.

Answer 1

Only thing I know to prevent this is assign values like that 100%-10. But it has some compatibility issues tho.

Answer 2

I don't know how cross browser compatible it is (it works in firefox and safari), but you could try this solution:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(Only posted the values that I changed)

Answer 3

Perhaps take the border+background off the input, and instead enclose it in a div with border+background and width:100%, and set a margin on the input?

Answer 4

One option is to wrap the INPUT in a DIV which has the padding.

CSS:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>