Padding within inputs breaks width 100%

Question

Using CSS3 you can use the property box-sizing to alter how the browser calculate the width of the input.

input.input {
    width: 100%;
    box-sizing: border-box;
}

You can read more about it here: http://css-tricks.com/box-sizing/

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)

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>

The oft-forgotten calc can come to the rescue here:

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

Since we know the padding will add to the width of the element, we simply subtract the padding from the overall width. It's supported by all major browsers, is responsive, and doesn't require messy wrapper divs.

I've been having some issues with something similar to this. I have tds with inputs of 100% and a small padding. What I did was compensate for the padding on the td as follows:

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

padding of 8px to include the border and padding of the input/textarea. Hope this helps!

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?

One solution I have found works is to absolutely position the input with a relatively positioned parent tag.

<p class="full-width-input">
    <input type="text" class="text />
</p>

The apply the style:

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

The only thing to be aware of is that the paragraph tag needs a height setting as its absolutely positioned children will not expand its height. This avoids the need to set width: 100% by locking it to the left and right sides of the parent element.