CSS and input 100% width

Question

I have various input which I wish to set 100% width of their parent -- which happens to be a DIV with a 16px border.

When I set the border on the input to ZERO and it's width to 100% -- everything is fine. The second I add padding or margin to the input -- the damn controls over lap the border.

If I wrap the input in a DIV and provide the padding/margin that way when the control is selected (in Chrome) the INPUT gets a focus rectangle and looks ridiculous...

Whats the way to accomplish this in CSS?

Alex

Answer 1

input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

DEMO

READ MORE