Fixing Input and Textarea 100% Width Padding Issues
It’s often most convenient to set width at 100% on inputs and textareas to ensure they remain fully flexible and always sized properly. However, if you given the inputs padding of 10px for example, at 100% width the inputs will be 20px too wide! This is problematic. Setting the width to a lower percent, like 97% for example, might seem like the thing to do, but that’s never reliable if the parent container changes width too much.
The answer is this nifty bit of CSS which will ignore the padding in relation to the actual size of the input.
box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;